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 相关文章推荐
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
jQuery each函数源码分析
May 25 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 Javascript
详解JavaScript原型与原型链
Nov 16 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中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
fgetcvs在linux的问题
2012/01/15 PHP
php中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
JS的反射问题
2010/04/07 Javascript
JS 实现完美include载入实现代码
2010/08/05 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
微信小程序实现横向滚动导航栏效果
2019/12/12 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
Python学习之asyncore模块用法实例教程
2014/09/29 Python
Python判断Abundant Number的方法
2015/06/15 Python
python 容器总结整理
2017/04/04 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
python实现动态数组的示例代码
2019/07/15 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
保密承诺书范文
2014/03/27 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python
php去除数组中为0的元素的实例分析
2021/11/17 PHP