JS实现iframe内部网页滚动到底部触发事件的方案

iframe滚动到底部判断方案

此前遇到一个需求，需要判断iframe嵌入的网页是否滚动到底部以触发特定事件。网络上多数资料仅涉及当前页面自身的滚动判断，因此经过自行研究，找到了针对iframe内部滚动的解决方法。

clientHeight属性表示元素占据的整个垂直空间高度，即可视区域的高度。

offsetHeight属性指元素内容的实际高度，包含边框和滚动条（如果存在）。

scrollTop属性表示滚动条当前滚动过的长度，即元素顶部距离视口顶部的距离。

代码实现与注意事项

以下是实现该功能的具体代码示例。

 
<iframe src="~/Files/3.html" id="iframepage" width="825" onload="func()"></iframe>
<script type="text/javascript">
function func() {
var ifm = document.getElementById("iframepage");
ifm.height = window.document.body.clientHeight - 100;
} 
<!--在chrome有兼容问题，FF和IE10无问题，网上说chrome访问iframe要在服务器环境下，不知道情况-->
window.document.getElementById("iframepage").contentWindow.onscroll = function aaa() {
var ifm = document.getElementById("iframepage").contentWindow.document.documentElement;
if (ifm.scrollTop == ifm.scrollHeight - ifm.clientHeight) {
alert("到底了");
} 
} 
</script>