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 相关文章推荐
HTML中事件触发列表与解说
Jul 09 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
Javascript中arguments用法实例分析
Jun 13 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 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调用mysql存储过程
2007/02/14 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
Python微信公众号开发平台
2018/01/25 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
小区停车场管理制度
2014/01/27 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
2015年妇女工作总结
2015/05/14 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
django中websocket的具体使用
2022/01/22 Python