社区
Ajax
帖子详情
两个iframe怎么同步滚动???
szjq
2007-05-30 03:34:19
我现在一个页面上有两个iframe窗体,现在我想实现拉动这个两个其中任一个iframe的滚动条时都可以单独拉动,然后有一个开关,选择了之后就可以让这两个iframe不管拉动其中的哪一个,两个iframe都能同步滚动
有高人做过这样的功能吗?
...全文
406
7
打赏
收藏
两个iframe怎么同步滚动???
我现在一个页面上有两个iframe窗体,现在我想实现拉动这个两个其中任一个iframe的滚动条时都可以单独拉动,然后有一个开关,选择了之后就可以让这两个iframe不管拉动其中的哪一个,两个iframe都能同步滚动 有高人做过这样的功能吗?
复制链接
扫一扫
分享
转发到动态
举报
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
打赏
举报
回复
变态需求!
JS去除
iframe
滚动
条的方法
主要介绍了JS去除
iframe
滚动
条的方法,涉及javascript操作
iframe
中属性的技巧,非常具有实用价值,需要的朋友可以参考下
解决
iframe
中fixed失效的问题
这是一个解决fixed在
iframe
中失效的解决案例,只要把文件放到编辑器中打开即可看到效果
弹出窗口_
iframe
_最终版本
①ie7、ie8、firefox及chrome中设置固定后方页面内容(禁止后方的
滚动
条
滚动
) ②ie9及以上浏览器中只固定
iframe
页面,后方页面内容将随着
滚动
条
滚动
【原因使用禁止代码时出错】
iframe
自适应高度 .doc
iframe
自适应高度 .doc
基于
iframe
的跨域与更新父窗体地址栏的解决方案.docx
基于
iframe
的跨域与更新父窗体地址栏的解决方案.docx
Ajax
52,792
社区成员
25,335
社区内容
发帖
与我相关
我的任务
Ajax
Web 开发 Ajax
复制链接
扫一扫
分享
社区描述
Web 开发 Ajax
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章