使用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 相关文章推荐
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
return false;和e.preventDefault();的区别
Jul 11 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
js中async函数结合promise的小案例浅析
Apr 14 Javascript
JS加载解析Markdown文档过程详解
May 19 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自定义的格式化时间示例代码
2013/12/05 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
使用Python写一个小游戏
2018/04/02 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
python with (as)语句实例详解
2020/02/04 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
Django更新models数据库结构步骤
2020/04/01 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
最新党员的自我评价分享
2013/11/04 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
班级文化建设标语
2014/06/23 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
六年级作文之关于梦
2019/10/22 职场文书
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫