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 Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
基于jquery的Repeater实现代码
Jul 17 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
Javascript继承机制详解
May 30 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
详解vue axios中文文档
Sep 12 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
vue-router 中 meta的用法详解
Nov 01 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
用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
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
python多线程下信号处理程序示例
2019/05/31 Python
Python中@property的理解和使用示例
2019/06/11 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
小学教师节活动方案
2014/01/31 职场文书
学校搬迁方案
2014/06/15 职场文书
营销计划书范文
2015/01/17 职场文书
活着观后感
2015/06/03 职场文书
旗帜观后感
2015/06/08 职场文书