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 相关文章推荐
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
js实现div弹出层的方法
Nov 20 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 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
用文本文件制作留言板提示(上)
2006/10/09 PHP
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
node.js中的console用法总结
2014/12/15 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
js实现微信聊天效果
2020/08/09 Javascript
js实现日历
2020/11/07 Javascript
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
Python如何实现转换URL详解
2019/07/02 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
pandas分批读取大数据集教程
2020/06/06 Python
门卫班长岗位职责
2013/12/15 职场文书
大众服装店创业计划书范文
2014/01/01 职场文书
工程招投标邀请书
2014/01/30 职场文书
公司营业员的自我评价
2014/03/04 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
有关环保的标语
2014/06/13 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
委托书英文
2015/01/28 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
python批量更改目录名/文件名的方法
2021/04/18 Python