两个iframe怎么同步滚动???

szjq 2007-05-30 03:34:19
我现在一个页面上有两个iframe窗体,现在我想实现拉动这个两个其中任一个iframe的滚动条时都可以单独拉动,然后有一个开关,选择了之后就可以让这两个iframe不管拉动其中的哪一个,两个iframe都能同步滚动


有高人做过这样的功能吗?
...全文
406 7 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
OopsJeff 2010-10-18
  • 打赏
  • 举报
回复
选不选都一个蛋. 不能同步
szjq 2007-06-13
  • 打赏
  • 举报
回复
rob123(萝卜[http://www.robchen.cn]) :同步开关不能用,选不选都同步滚动
还有问题是,如果同步开关可用的话,任意拉动下面iframe,然后选中同步,这时是从刚才所拉动的位置同步的还是两个窗体都是从顶端开始同步的???

谢谢
rob123 2007-06-01
  • 打赏
  • 举报
回复
if(activeFrame.document.documentElement&&activeFrame.document.documentElement.scrollTop)

--->

if(activeFrame.document.documentElement)
rob123 2007-06-01
  • 打赏
  • 举报
回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
font-size:9pt;
color:#333333;
}
iframe {
position:absolute;
width:200px;
height:400px;
margin:20px;
border:1px solid #FF6600;
}
#ifr1 {
left:20px;
top:20px;
}
#ifr2 {
left:320px;
top:20px;
}
</style>
<script type="text/javascript">
function FrameHelper(ifr1,ifr2){
this.ifr1 = ifr1;
this.ifr2 = ifr2;
this.syncable = true;
this.bindEvent();
}
FrameHelper.prototype = {
sync:function(activeFrame){
if(!this.syncable)return;
var passiveFrame = (activeFrame == this.ifr1) ? this.ifr2 : this.ifr1;
if(activeFrame.document.documentElement&&activeFrame.document.documentElement.scrollTop){
passiveFrame.document.documentElement.scrollTop = activeFrame.document.documentElement.scrollTop;
passiveFrame.document.documentElement.scrollLeft = activeFrame.document.documentElement.scrollLeft;
}else{
passiveFrame.document.body.scrollTop = activeFrame.document.body.scrollTop;
passiveFrame.document.body.scrollLeft = activeFrame.document.body.scrollLeft;
}
},
bindEvent:function(){
var _this = this;
if(document.all){
this.ifr1.attachEvent("onscroll",function(){_this.sync(_this.ifr1);});
this.ifr2.attachEvent("onscroll",function(){_this.sync(_this.ifr2);});
}else{
this.ifr1.addEventListener("scroll",function(){_this.sync(_this.ifr1);},false);
this.ifr2.addEventListener("scroll",function(){_this.sync(_this.ifr2);},false);
}
},
syncModeOn:function(){
this.syncable = true;
},
syncModeOff:function(){
this.syncable = false;
}
}
window.onload = function(){
var fh = new FrameHelper(document.getElementById("ifr1").contentWindow,document.getElementById("ifr2").contentWindow);
document.getElementById("toggle").onchange = function(){
(!!this.checked)?fh.syncModeOn():fh.syncModeOff();
}
}
</script>
</head>

<body>
<iframe id="ifr1" src="s.html"></iframe>
<iframe id="ifr2" src="s.html"></iframe>
<input type="checkbox" id="toggle" checked="checked"/>是否同步滚动
</body>
</html>
astx2006 2007-06-01
  • 打赏
  • 举报
回复
帮楼主顶吧
szjq 2007-05-31
  • 打赏
  • 举报
回复
呵呵 一般吧,是想做个ie版的def功能
ConnectionString 2007-05-31
  • 打赏
  • 举报
回复
变态需求!

52,792

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 Ajax
社区管理员
  • Ajax
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧