使用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 相关文章推荐
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 Javascript
JavaScript实现简单动态表格
Dec 02 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实现异步调用方法研究与分享
2011/10/27 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
让FireFox支持innerText的实现代码
2009/12/01 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
python实现倒计时的示例
2014/02/14 Python
python发送HTTP请求的方法小结
2015/07/08 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
北京天润融通.net面试题笔试题
2012/02/20 面试题
《阳光》教学反思
2014/02/23 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
春风行动实施方案
2014/03/28 职场文书
《花木兰》教学反思
2014/04/09 职场文书
党员剖析材料范文
2014/09/30 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
青年教师听课心得体会
2016/01/15 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS