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

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 >
  <div >
    <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.

CodePudding user response：

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