使用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 相关文章推荐
番茄的表单验证类代码修改版
Jul 18 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
基于Vue单文件组件详解
Sep 15 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
简述Vue中容易被忽视的知识点
Dec 09 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
详解JavaScript自定义函数
Jul 29 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
大师制作的中短波矿石收音机
2020/04/02 无线电
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
2011/07/26 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
JavaScript截屏功能的实现代码
2017/07/28 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
Python 学习笔记
2008/12/27 Python
python发送arp欺骗攻击代码分析
2014/01/16 Python
python3编码问题汇总
2016/09/06 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
linux面试题参考答案(1)
2016/01/22 面试题
工程造价管理专业大专生求职信
2013/10/06 职场文书
网络教育自我鉴定
2013/11/01 职场文书
英语自荐信范文
2013/12/11 职场文书
工作自我推荐信范文
2015/03/25 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis
小程序实现筛子抽奖
2021/05/26 Javascript