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中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
全面总结Javascript对数组对象的各种操作
Jan 22 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 Javascript
前端 javascript 实现文件下载的示例
Nov 24 Javascript
JavaScript中的LHS和RHS分析详情
Apr 06 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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
pygame实现弹力球及其变速效果
2017/07/03 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
Python循环结构的应用场景详解
2019/07/11 Python
对Python _取log的几种方式小结
2019/07/25 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
自荐书封面下载
2013/11/29 职场文书
学生周末回家住宿长期请假条
2014/02/15 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
房屋租赁意向书
2014/04/01 职场文书
商务日语专业自荐信
2014/04/17 职场文书
作风年建设汇报材料
2014/08/14 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
办理信用卡工作证明
2014/09/30 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
停电通知范文
2015/04/16 职场文书
教师节感想
2015/08/11 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
MySQL查询日期时间
2022/05/15 MySQL