使用iframe window的scroll方法控制iframe页面滚动


Posted in Javascript onMarch 05, 2014

在页面中如何控制内嵌的iframe滚动呢?方法是使用iframe window的scroll方法:

1、获取iframe的窗口对象

var iwin = document.getElementById('iframe1').contentWindow;

2 、获取iframe的窗口document对象

var doc = iwin.document;

3、调用iframe window对象的scroll方法

iwin.scroll(0,doc.body.scrollHeight);

scroll两个参数为x,y轴的滚动量

doc.body.scrollHeight为iframe页面的高度(包含未显示的部分)

一个综合应用例子如下:

<html> <head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>hover test</title> 
<style type="text/css"> 
ul{ 
background-color:#ff00ff; 
display:block; 
} 
.toc li{ 
position:relative; width:10em; 
background-color:#00ff00; 
display:block; 
} 
li a { 
/*display:block;*/ /*若以块的模式显示,则会占满整个父元素空间*/ 
background-color:#0000ff; 
} /*必须让a成为块级元素*/ 
li a i{ 
display:none; 
} 
li a:hover{ 
text-align:left; 
}/*这里添加的代码只是为了让IE6显示,没有特殊功能,除text-decoration,color,z-index外都可以写*/ 
.toc li a:hover i{ 
display:block; 
width:6em; 
position:absolute; 
top:0; 
left:100%; /* 这里100%指相对于元素li的宽度*/ 
margin:-1em 0 0 0em; 
padding:1em; 
background:#cde; 
border:1px solid red; 
text-align:left; 
z-index:10000; 
} 
</style> 
</head> 
<body> 
<iframe id="iframe1" src="" width="400" height="300"></iframe> 
html代码 
<ul class="toc" id="toc"> 
<li><a href="1.html">Chapter 1<i>In which a dragon is seen</i></a></li> 
<li><a href="2.html">Chapter 1<i>In which a knight is summoned</i></a></li> 
<li><a href="3.html">Chapter 1<i>In which a proncess is disappointed</i></a></li> 
<li><a href="4.html">Chapter 1<i>In which a dragon is seen</i></a></li> 
<li><a href="5.html">Chapter 1<i>In which a dragon is seen</i></a></li> 
<li><a href="6.html">Chapter 1<i>In which a dragon is seen</i></a></li> 
<li><a href="7.html">Chapter 1<i>In which a dragon is seen</i></a></li> 
</ul> 
<script language="javascript"> 
function getElementAbsPos(e) { 
var t = e.offsetTop; 
var l = e.offsetLeft; 
while(e = e.offsetParent) { 
t += e.offsetTop; 
l += e.offsetLeft; 
} 
return {left:l,top:t}; 
} 
function getPosition(obj){ 
var left = 0; 
var top = 0; 
while(obj != document.body){ 
left = obj.offsetLeft; 
top = obj.offsetTop; 
obj = obj.offsetParent; 
} 
return left; 
} 
var lis = document.getElementsByTagName('li'); 
var iwin = document.getElementById('iframe1').contentWindow; 
var doc = iwin.document; 
for(var i=0;i<lis.length;i++){ 
lis[i].onmouseover = function(){ 
var obji = this.childNodes[0].childNodes[1]; 
doc.writeln('<br>'+ obji.innerText + ',' + getElementAbsPos(document.getElementById('toc')).left); 
doc.writeln('<br>'+ obji.offsetLeft + ',' + getElementAbsPos(obji).left + ',' + obji.offsetWidth+ ',' + obji.style.left); 
doc.writeln('<br><b>'+ doc.body.scrollHeight + '</b>') 
iwin.scroll(0,doc.body.scrollHeight); 
//iwin.scrollTo(10000); //无效 
} 
} 
</script> 
</body> 
</html>
Javascript 相关文章推荐
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
js获取图片宽高的方法
Nov 25 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
JS 实现分页打印功能
May 16 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 #Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 #Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 #Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 #Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 #Javascript
js时间比较示例分享(日期比较)
Mar 05 #Javascript
对于Form表单reset方法的新认识
Mar 05 #Javascript
You might like
无数据库的详细域名查询程序PHP版(2)
2006/10/09 PHP
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
Python中shutil模块的学习笔记教程
2017/04/04 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
什么是Python变量作用域
2020/06/03 Python
python绘图模块之利用turtle画图
2021/02/12 Python
如何用SQL语句进行模糊查找
2015/09/25 面试题
语文教师个人工作总结
2015/02/06 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书