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 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
js 获取经纬度的实现方法
Jun 20 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
实例详解Node.js 函数
Jun 10 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 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
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
jQuery实现图像旋转动画效果
2016/05/29 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
Python将xml和xsl转换为html的方法
2015/03/10 Python
Django 登陆验证码和中间件的实现
2018/08/17 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
Android面试题附答案
2014/12/08 面试题
贯彻学习两会心得体会范文
2014/03/17 职场文书
给校长的一封检讨书
2014/09/20 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android
python获取带有返回值的多线程
2022/05/02 Python
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android