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 相关文章推荐
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
修改jquery.lazyload.js实现页面延迟载入
Dec 22 Javascript
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
js的onload事件及初始化按钮事件示例代码
Sep 25 Javascript
jQuery中:enabled选择器用法实例
Jan 04 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
Javascript 实现计算器时间功能详解及实例(二)
Jan 08 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
vue路由传参三种基本方式详解
Dec 09 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
用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验证码(支持中文)
2007/02/14 PHP
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
php array_unique之后json_encode需要注意
2011/01/02 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
javascript String 对象
2008/04/25 Javascript
js判断鼠标同时离开两个div的思路及代码
2013/05/31 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
python实现手势识别的示例(入门)
2020/04/15 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
中英双版中文教师求职信
2013/10/27 职场文书
县级文明单位申报材料
2014/05/23 职场文书
先进员工获奖感言
2014/08/14 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
php字符串倒叙
2021/04/01 PHP
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL