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>
相关文章
今天小编就为大家分享一篇layui实现图片虚拟路径上传,预览和删除的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
随机颜色如何获取，在本文将为大家介绍下如何使用js来获取，感兴趣的朋友可以参考下2013-09-09
大家应该都知道基本图表一共有六种，分别是柱状图、折线图、散点图、气泡图、饼图和雷达图。前面五种图形都已经介绍过如何实现了，今天我们一起来看看最后的雷达图。有需要的朋友们可以参考学习下。2016-09-09
JavaScript实现统计文本框Textarea字数增强用户体验
现在流行的Twitter等微博客网站，有一个很好的用户体验，就是在文本框中输入文字的时候，会自动统计输入的字符，并显示用户还能输入的字符，在限制了140个字的微博客中，这样的小提示可以很好的增强用户体验,本文也尝试着实现一下2012-12-12
这篇文章主要为大家详细介绍了javascript实现图片轮播代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
js几个不错的函数 $$()...2006-10-10
将HTML自动转为JS代码...2006-07-07
这篇文章主要给大家介绍了关于Webpack按需加载打包chunk命名的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Webpack具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-09-09
这篇文章主要介绍了JS实现websocket长轮询实时消息提示的效果的相关资料,需要的朋友可以参考下2017-10-10
常见的浏览器存储方式（cookie、localStorage、sessionStorage）
今天我们从前端的角度了解一下浏览器存储，我们常见且常用的存储方式主要由两种：cookie、webStorage（localStorage和sessionStorage）。本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2019-05-05
最新评论