使用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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
jQuery+css实现图片滚动效果(附源码)
Mar 18 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
小程序如何获取多个formId实现详解
Sep 20 Javascript
layUI的验证码功能及校验实例
Oct 25 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
福利彩票幸运号码自动生成器
2006/10/09 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
Prototype String对象 学习
2009/07/19 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
Vue键盘事件用法总结
2017/04/18 Javascript
javascript完美实现给定日期返回上月日期的方法
2017/06/15 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
Python 中 Meta Classes详解
2016/02/13 Python
python中join()方法介绍
2018/10/11 Python
python实现处理mysql结果输出方式
2020/04/09 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
用Python实现职工信息管理系统
2020/12/30 Python
澳洲的服装老品牌:SABA
2018/02/06 全球购物
工厂厂长岗位职责
2013/11/08 职场文书
技校生自我鉴定
2013/12/08 职场文书
学校安全工作制度
2014/01/19 职场文书
投标担保书范文
2014/04/02 职场文书
律师授权委托书范本
2014/10/07 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
起诉状范本
2015/05/20 职场文书
运动会1000米加油稿
2015/07/21 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
python生成随机数、随机字符、随机字符串
2021/04/06 Python
利用Python多线程实现图片下载器
2022/03/25 Python
解决vue中provide inject的响应式监听
2022/04/19 Vue.js