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 08 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
Vue路由权限控制解析
Nov 09 Javascript
编写v-for循环的技巧汇总
Dec 01 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
js下函数般调用正则的方法附代码
2008/06/22 PHP
PHP 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
PHP微信红包API接口
2015/12/05 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
jquery 页面全选框实践代码
2010/04/02 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python字符串与url编码的转换实例
2018/05/10 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
详解Flask前后端分离项目案例
2020/07/24 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
优秀求职信范文分享
2014/01/26 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
2014年质量工作总结
2014/11/22 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
《穷人》教学反思
2016/02/19 职场文书