使用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 String 的扩展方法集合
Jun 01 Javascript
Javascript面向对象之四 继承
Feb 08 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 Javascript
js不常见操作运算符总结
Nov 20 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
第十五节--Zend引擎的发展
2006/11/16 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
jQuery获取同级元素的简单代码
2016/07/09 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
关于uniApp editor微信滑动问题
2021/01/15 Javascript
Python实现类的创建与使用方法示例
2017/07/25 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
总结python中pass的作用
2019/02/27 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
装潢设计实习自我鉴定
2013/09/19 职场文书
创意活动策划书
2014/01/15 职场文书
《雨点》教学反思
2014/02/12 职场文书
升职演讲稿范文
2014/05/23 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis