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.roller.js
Jun 27 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
javascript插入样式实现代码
Feb 22 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
vue.js实现照片放大功能
Jun 23 Javascript
JavaScript实现alert弹框效果
Nov 19 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+SQLite存储方案
2010/09/04 PHP
php常用表单验证类用法实例
2015/06/18 PHP
php中header设置常见文件类型的content-type
2015/06/23 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
jquery 获取json数据实现代码
2009/04/27 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
PHP PDO操作总结
2014/11/17 Javascript
JavaScript错误处理
2015/02/03 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
python统计一个文本中重复行数的方法
2014/11/19 Python
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
python爬虫实战之爬取京东商城实例教程
2017/04/24 Python
Python装饰器用法实例总结
2018/02/07 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
python代码编写计算器小程序
2020/03/30 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
Linux Interview Questions For software testers
2012/06/02 面试题
初中毕业生的自我评价
2014/03/03 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
家具商场的活动方案
2014/08/16 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书
利用python做表格数据处理
2021/04/13 Python
PHP获取学生成绩的方法
2021/11/17 PHP