使用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 相关文章推荐
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
eval的两组性能测试数据
Aug 17 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
轻松学习JavaScript函数中的 Rest 参数
May 30 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
详解vue 2.6 中 slot 的新用法
Jul 09 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 Javascript
jquery实现抽奖功能
Oct 22 jQuery
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数据库操作面向对象的优点
2006/10/09 PHP
php加密解密实用类分享
2014/01/07 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
python pandas时序处理相关功能详解
2019/07/03 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
python实现扫雷游戏的示例
2020/10/20 Python
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
摄影助理岗位职责
2014/02/07 职场文书
学校门卫岗位职责
2014/03/16 职场文书
篝火晚会主持词
2014/03/25 职场文书
个人合作协议书范本
2014/04/18 职场文书
促销活动计划书
2014/05/02 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
大学生见习报告总结
2014/11/04 职场文书
写给老师的感谢信
2015/01/20 职场文书
车间主任岗位职责
2015/02/03 职场文书
公司市场部岗位职责
2015/04/15 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
关于Redis的主从复制及哨兵问题
2022/06/16 Redis