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检测函数
May 31 Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
js获取日期:昨天今天和明天、后天
Jun 11 Javascript
jQuery中:first选择器用法实例
Dec 30 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
JavaScript隐式类型转换
Mar 15 Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 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写的小东西
2006/12/06 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
javascript void(0)的妙用
2009/10/21 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
python的类变量和成员变量用法实例教程
2014/08/25 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
在Python中增加和插入元素的示例
2018/11/01 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
2014年幼儿园个人工作总结
2014/11/10 职场文书
班委竞选稿范文
2015/11/21 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
MySQL创建高性能索引的全步骤
2021/05/02 MySQL
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android