使用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 相关文章推荐
JavaScript入门教程(8) Location地址对象
Jan 31 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
Mar 10 Javascript
js 可拖动列表实现代码
Dec 13 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
在小程序中推送模板消息的实现方法
Jul 22 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 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
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
js Html结构转字符串形式显示代码
2011/11/15 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
王老吉广告词
2014/03/20 职场文书
支部鉴定材料
2014/06/02 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
顶岗实习协议书
2015/01/29 职场文书
繁星春水读书笔记
2015/06/30 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书
使用Ajax实现进度条的绘制
2022/04/07 Javascript
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript