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的无缝循环新闻列表插件
Mar 07 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 Javascript
微信小程序 详解Page中data数据操作和函数调用
Jan 12 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 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生成静态页的实现方法
2013/05/10 PHP
CodeIgniter CLI模式简介
2014/06/17 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
python查看模块,对象的函数方法
2018/10/16 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
上海方立数码笔试题
2013/10/18 面试题
事务机电主管工作职责
2014/02/25 职场文书
承诺书格式
2014/06/03 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
2016年元旦致辞
2015/08/01 职场文书