js判断iframe内的网页是否滚动到底部触发事件


Posted in Javascript onMarch 18, 2014

之前有个需求是要判断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>
Javascript 相关文章推荐
jQuery队列操作方法实例
Jun 11 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 #Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 #Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 #Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 #Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 #Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 #Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 #Javascript
You might like
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
python3 与python2 异常处理的区别与联系
2016/06/19 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
python ---lambda匿名函数介绍
2019/03/13 Python
python将字母转化为数字实例方法
2019/10/04 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
教师实习自我鉴定
2013/12/14 职场文书
关于毕业的广播稿
2014/01/10 职场文书
大四自我鉴定
2014/02/08 职场文书
学生会招新策划书
2014/02/14 职场文书
出国英文推荐信
2014/05/10 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
家长反馈意见及建议
2015/06/03 职场文书
诚信教育主题班会
2015/08/13 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
Java设计模式之代理模式
2022/04/22 Java/Android