How To Detect if Finally We Reached the Bottom of The Iframe in jQuery?

Question

May You all Blessed Today!

I wanna ask something about how to detect scrolling event when we finally reach the bottom of the Iframe. I've been trying out some jQuery code that I saw in these stackoverflow's post here and here, but nothing can do the job. So, let's cut the bull, here's my html :

<div class="wrapper-1">
  <div class="wrapper-2">
    <iframe id="iframec" class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Tokyo" src="https://en.wikipedia.org/wiki/Tokyo" loading="lazy"></iframe>
  </div>
</div>

And here's the jQuery code, I tried :

CODE 1 :

$(function() {    
  $("#iframec").load(function() {
  var iframe = document.getElementById("iframec").contentWindow;
     $(iframe).scroll(function() {
        if($(iframe).scrollTop()==$(iframe).height()-$("#iframec").height()) {
            alert("Reached bottom!");             
        }
     });
  });
 })

CODE 2 :

$(window).scroll(function () {
  if ($(window).scrollTop() == $(document).height() - $(window).height()) alert('Bottom reached');
});

I know it seems so easy to you, but I'm very new in jQuery. So, please help me out guys. Thanks A Lot guys.

So, how's the solution, if I'm gonna apply that HTML code? Thanks @Bravo — Khrisna Mahendra, Jun 21 '22 at 10:22
Sorry, I exactly don't understand 'not the same origin' you said. I'm very new in jQuery and JavaScript @Bravo — Khrisna Mahendra, Jun 21 '22 at 10:24
nothing to do with jquery or javascript - it has to do with **security** ... your web page is on `https://yourdomain.com` (or probably localhost, or just a `file://` probably) anyway, the iframe is not, it's `https://en.wikipedia` etc ... it's not the same origin, therefore, you can't peek inside it — Bravo, Jun 21 '22 at 10:25
Correct - it's so people can't do bad things with, say, bank sites for example - imagine a bank .. `libertybank.com` ... imagine a bad person buys `1ibertybank.com` domain and manages to trick someone who is a customer of `libertybank.com` to go to `1ibertybank.com` ... and creates a full page iframe into `libertybank.com` ... then watches keystrokes because browsers let that happen — Bravo, Jun 21 '22 at 10:31
Ok, noted @Bravo. Btw, do you have an experience using Fullpage JS or PagePiling JS? — Khrisna Mahendra, Jun 21 '22 at 10:35

jcubic · Accepted Answer · 2022-06-21T23:36:28.797

You can't access the Cross-Origin iframe. The only way to have what you want (access page inside an iframe that you don't control) is to use a server-side proxy script so you will be in control of the iframe. But the code for the scroll event needs to be inside the iframe window object not on the iframe tag or executed on the page inside the iframe.

Check: How to expose IFrame's DOM using jQuery?.

And as for proxy, I have a project YAPP Proxy written in PHP. There were already a few proxy scripts but they were pretty outdated and none of them was working with JavaScript code.

You can see the demo here:

https://jcubic-proxy.herokuapp.com/demo.html?url=https://en.wikipedia.org/wiki/Tokyo

if the proxy script is on the same domain as your main page you can access the iframe window object and add a scroll event.

You can check how the demo.html page was created by viewing the source:

https://github.com/jcubic/yapp/blob/master/demo.html

How To Detect if Finally We Reached the Bottom of The Iframe in jQuery?

1 Answers1