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读取URL参数小例子
Aug 30 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 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
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
python文件与目录操作实例详解
2016/02/22 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
windows下python安装小白入门教程
2018/09/18 Python
用pycharm开发django项目示例代码
2019/06/13 Python
Python API len函数操作过程解析
2020/03/05 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
人力资源管理专业学生自我评价
2013/11/20 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
个人道歉信大全
2019/04/11 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
Android Studio 计算器开发
2022/05/20 Java/Android