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 相关文章推荐
取得传值的函数
Oct 27 Javascript
基于JQuery制作的产品广告效果
Dec 08 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 Javascript
Openlayers绘制聚合标注
Sep 28 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
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
js闭包的用途详解
2014/11/09 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
Python 文件操作实现代码
2009/10/07 Python
python复制与引用用法分析
2015/04/08 Python
python中requests小技巧
2017/05/10 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
高中生毕业自我鉴定
2013/10/10 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
表彰大会策划方案
2014/05/13 职场文书
营业用房租赁协议书
2014/11/26 职场文书
小学音乐课教学反思
2016/02/18 职场文书
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB
MySQL七大JOIN的具体使用
2022/02/28 MySQL