使用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 相关文章推荐
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
jQuery之过滤元素操作小结
Nov 30 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 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
实用函数4
2007/11/08 PHP
PHP代码优化技巧小结
2015/09/29 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
JS Array对象入门分析
2008/10/30 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
JavaScript每天必学之基础知识
2016/09/17 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
tensorflow多维张量计算实例
2020/02/11 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
公务员个人自我评价分享
2013/11/06 职场文书
敬老文明号事迹材料
2014/01/16 职场文书
新学期班主任寄语
2014/01/18 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
Python基础之条件语句详解
2021/06/16 Python
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL