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获取当前日期时间及其它操作函数
Jan 11 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
个人小程序接入支付解决方案
May 23 Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 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把数字转成人民币大写的函数分享
2014/06/30 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
python实现ftp客户端示例分享
2014/02/17 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
Python属性和内建属性实例解析
2020/01/14 Python
Python猜数字算法题详解
2020/03/01 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
武汉东之林科技有限公司机试
2013/09/17 面试题
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
高中军训广播稿
2014/01/14 职场文书
高中军训感言200字
2014/02/23 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
交通事故案件代理词
2015/05/23 职场文书