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 相关文章推荐
用javascript父窗口控制只弹出一个子窗口
Apr 10 Javascript
五个jQuery图片画廊插件 推荐
May 12 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
Javascript进制转换实例分析
May 14 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
JS随机排序数组实现方法分析
Oct 11 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 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 开发环境配置(Zend Server安装)
2010/04/28 PHP
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
React进阶学习之组件的解耦之道
2017/08/07 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python Tkinter GUI编程入门介绍
2015/03/10 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
python requests 使用快速入门
2017/08/31 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
《灰椋鸟》教学反思
2014/04/27 职场文书
秋天的雨教学反思
2014/04/27 职场文书
通信工程专业求职信
2014/06/04 职场文书
员工家属慰问信
2015/03/24 职场文书
综治目标管理责任书
2015/05/11 职场文书
Python 批量下载阴阳师网站壁纸
2021/05/19 Python
字节飞书面试promise.all实现示例
2022/06/16 Javascript