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动态添加删除select项(实现代码)
Sep 03 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 Javascript
Axios代理配置及封装响应拦截处理方式
Apr 07 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
FCKeditor的安装(PHP)
2007/01/13 PHP
php数组分页实现方法
2016/04/30 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
php中错误处理操作实例分析
2019/08/23 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
Javascript 面向对象 命名空间
2010/05/13 Javascript
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
Python中列表元素转为数字的方法分析
2016/06/14 Python
多版本Python共存的配置方法
2017/05/22 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
python判断设备是否联网的方法
2018/06/29 Python
Python中函数参数调用方式分析
2018/08/09 Python
Python Cookie 读取和保存方法
2018/12/28 Python
python如何实现异步调用函数执行
2019/07/08 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
Python post请求实现代码实例
2020/02/28 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
简历中自我评价怎么写
2014/02/12 职场文书
检讨书格式
2015/01/23 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL