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 相关文章推荐
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 Javascript
vue实现拖拽交换位置
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
初级的用php写的采集程序
2007/03/16 PHP
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
php模板原理讲解
2013/11/13 PHP
PHP查询快递信息的方法
2015/03/07 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
JS 页面计时器示例代码
2013/10/28 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
python中bisect模块用法实例
2014/09/25 Python
python requests.post带head和body的实例
2019/01/02 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
浅谈Python 参数与变量
2020/06/20 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
Melissa香港官网:MDreams
2016/07/01 全球购物
医学类个人求职信范文
2014/02/05 职场文书
事务机电主管工作职责
2014/02/25 职场文书
十八大演讲稿
2014/05/22 职场文书
护理目标管理责任书
2014/07/25 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript