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在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 Javascript
Openlayers绘制聚合标注
Sep 28 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 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
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
PHP反射API示例分享
2016/10/08 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
深入浅析var,let,const的异同点
2018/08/07 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
Element PageHeader页头的使用方法
2020/07/26 Javascript
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
django中cookiecutter的使用教程
2020/12/03 Python
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
实习生自荐信范文
2013/11/13 职场文书
学校校庆演讲稿
2014/05/22 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
房产电话营销开场白
2015/05/29 职场文书
预备党员介绍人意见
2015/06/01 职场文书