使用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 相关文章推荐
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
javascript实现微信分享
Dec 23 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
js中toString()和String()区别详解
Mar 23 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
vue实现留言板todolist功能
Aug 16 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 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
example1.php
2006/10/09 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
高中生家长寄语大全
2014/04/03 职场文书
蓝颜请假条
2014/04/11 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
北京故宫导游词
2015/01/31 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书