如何检测最终我们是否到达了jQuery中的Iframe底部？

Question

祝你们今天万事如意！

我想问的是，当我们最终到达Iframe底部时，如何检测滚动事件。我一直在尝试一些jQuery代码，我在这些堆栈溢出的文章这里和这里中看到了这些代码，但是什么也做不了。所以，我们来说说吧，这是我的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>

下面是jQuery代码，我试过：

代码1 :

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

代码2 :

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

我知道这对你来说很容易，但我是jQuery的新手。所以请帮帮我伙计们。多谢各位。

Answer 1

你不能进入交叉产地。获得所需内容的唯一方法(在不受您控制的iframe中访问页面)是使用服务器端代理脚本，这样您就可以控制iframe。但是滚动事件的代码需要在iframe窗口对象中，而不是在iframe标记上，或者在iframe内的页面上执行。

检查：如何使用jQuery公开IFrame的DOM？。

至于代理，我有一个用PHP编写的项目YAPP代理。已经有几个代理脚本了，但是它们已经过时了，而且没有一个正在使用JavaScript代码。

您可以在这里看到演示：

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

如果代理脚本与主页面位于同一域中，则可以访问iframe窗口对象并添加滚动事件。

您可以通过查看源代码来检查demo.html页面是如何创建的：

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