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 相关文章推荐
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
JavaScript事件处理器中的event参数使用介绍
May 24 Javascript
JS实现随机化快速排序的实例代码
Aug 01 Javascript
js函数返回多个返回值的示例代码
Nov 05 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
如何手写简易的 Vue Router
Oct 10 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
模仿OSO的论坛(五)
2006/10/09 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
php unlink()函数使用教程
2018/07/12 PHP
php中关于换行的实例写法
2019/09/26 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
原生JS实现天气预报
2020/06/16 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
numpy库reshape用法详解
2020/04/19 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
几道Java和数据库的面试题
2013/05/30 面试题
理工大学毕业生自荐信
2013/11/01 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
我去timi了,一起去timi是什么意思?
2022/04/13 杂记
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python