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实现重发验证码按钮倒数功能
Apr 21 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 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中在PDO中使用事务(Transaction)
2011/05/14 PHP
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
php中JSON的使用方法
2015/04/30 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
javascript 自动转到命名锚记
2009/01/10 Javascript
jQuery Ajax 全解析
2009/02/08 Javascript
document.compatMode介绍
2009/05/21 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
深入理解Python中的内置常量
2017/05/20 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
python中xlutils库用法浅析
2020/12/29 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
在宿舍喝酒的检讨书
2014/09/28 职场文书
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android