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 相关文章推荐
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
jQuery下通过replace字符串替换实现大小图片切换
May 22 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
javascript:void(0)的作用示例介绍
Oct 28 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
angular多语言配置详解
May 16 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 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如何利用P3P实现跨域
2013/08/24 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
js对象的复制继承实例
2015/01/10 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
python基于右递归解决八皇后问题的方法
2015/05/25 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
Python实现合并两个列表的方法分析
2018/05/28 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
python如何实现数据的线性拟合
2019/07/19 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
J2EE是技术还是平台还是框架
2016/08/14 面试题
《故乡》教学反思
2014/04/10 职场文书
助学贷款贫困证明
2014/09/23 职场文书
鸟的天堂导游词
2015/01/31 职场文书
甲午大海战观后感
2015/06/02 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
2015国庆节感想
2015/08/04 职场文书
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript
python如何利用cv2模块读取显示保存图片
2021/06/04 Python