如何检测如果最终我们达到底部的Iframe在jQuery?

Question

祝大家今天幸福!

我想问一些关于如何检测滚动事件当我们最终到达Iframe的底部。我一直在尝试一些jQuery代码，我看到在这些stackoverflow的帖子这里和这里，但没有什么可以做的工作。那么，让我们切入正题，这是我的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代码，我试过了:

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');
});

我知道这对你来说似乎很容易，但我是jQuery的新手。所以，请帮帮我。谢谢大家。

Answer 1

不能访问跨域iframe。获得您想要的(访问您无法控制的iframe内的页面)的唯一方法是使用服务器端代理脚本，这样您就可以控制iframe。但是，滚动事件的代码需要在iframe窗口对象中，而不是在iframe标签上或在iframe内的页面上执行。

检查:如何使用jQuery暴露IFrame的DOM ?

至于代理，我有一个项目YAPP代理写在PHP。当时已经有一些代理脚本，但它们都很过时，没有一个是与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