js判断iframe内的网页是否滚动到底部触发事件
更新时间：2014年03月18日 10:51:11 作者：
这篇文章主要介绍了js判断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>
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>
相关文章
ES6不仅在语法上有很大的改进,在代码的组织结构上也有重大升级,下面这篇文章主要给大家介绍了关于ES6的一些实用高级技巧的相关资料,需要的朋友可以参考下2023-12-12
这篇文章主要为大家详细介绍了echarts实现折线图的拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
这篇文章主要带领大家学习JavaScript设计模式，其中重点介绍多态，举例说明多态的思想，对多态进行详细剖析，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了JSON 数据详解及实例代码分析的相关资料,需要的朋友可以参考下2017-01-01
跟我学习javascript的严格模式，对javascript严格模式进行概述，进入严格模式的方法，以及如何调用和相关语法，感兴趣的小伙伴们可以参考一下2015-11-11
对数组中的项目进行分组,你可能已经做过很多次了,好消息是,JavaScript 现在有了分组方法,所以你再也不必这样做了,下面我们就来看看它们的具体使用吧2024-02-02
这篇文章主要介绍了JS将滑动门改为选项卡（需鼠标点击）的实现方法,涉及JavaScript页面元素遍历及样式替换的相关技巧,再通过onmouseover与onclick即可分别实现滑动门与选项卡两种效果,需要的朋友可以参考下2015-09-09
开发Chrome扩展时，页面的popup.html中需要js的时候，直接将JS写在动态绑定JS事件会提示错误，下面有个不错的解决方法，大家可以参考下2014-02-02
这篇文章主要介绍了JavaScript获取当前网页最后修改时间的方法,涉及javascript中document.lastModified属性的使用技巧,需要的朋友可以参考下2015-04-04
Bootstrap Tree View简单而优雅的树结构组件实例解析
本文通过实例代码给大家介绍了Bootstrap Tree View简单而优雅的树结构组件,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-06-06
最新评论