求教如何让frame中左右2个页面滚动条同步滚动

时间：2020-12-24 07:54:19
如题,做了一个jsp页面用到frame,其中左右部分共同显示完整内容.现在希望左边页面的滚动条上下滚动时,右边页面也同步上下滚动,反之亦然.请教该怎么办.
PS: 只要能达到这种目的和效果,方法不限制.在线急求!

10 个解决方案

#1

顶一下,没人帮我么?

#2

<head>

    <script language="javascript">

        function init()

        {

            frames[0].document.body.innerHTML = "<div style=height:2000px></div>"

            frames[1].document.body.innerHTML = "<div style=height:2000px></div>"

            frames[0].document.body.onscroll = doFrameScroll;

            frames[1].document.body.onscroll = doFrameScroll;

        }

        function doFrameScroll()

        {

            var index = (this == frames[0].document.body) ? 0 : 1;

            frames[1 - index].document.body.scrollTop = frames[index].document.body.scrollTop;

        }

    </script>

</head>

<frameset cols="50%,50%" onload="init()">

    <frame src="about:blank">

    <frame src="about:blank">

</frameset>
你试下看可以不

#3

谢谢楼上,但是不行啊,不能同步滚动,而且里面内容也不见了..

#4

其实我只要实现类似功能,左右分2块,每块都有横向滚动条和纵向滚动条,2块的纵向滚动条要求同步滚动就行了.横向*滚动

#5

搞定了，3个页面：  test.html   f1.html   f2.html

代码如下：

test.html 
<frameset cols="50%,50%" id = "mainframe">

    <frame src="f1.html" id="f1" onmouseover="javascript:window.document.getElementById('mainframe').setAttribute('flag','true');">

    <frame src="f2.html" id="f2" onmouseover="javascript:window.document.getElementById('mainframe').setAttribute('flag','false');">

</frameset><noframes></noframes>


f1.html 
<div id="d1">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>

<script language="javascript">

	function ff1()

	{

		var flag =  parent.document.getElementById('mainframe').getAttribute('flag');

		if(flag == 'true')

			window.frameElement.parentNode.setAttribute('this',document.body.scrollTop);

		else

			scrollTo(0,window.frameElement.parentNode.getAttribute('this'));

		setTimeout("ff1()",1);

	}

	ff1();

</script>



f2.html 
<div id="d2">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>

<script language="javascript">

	function ff2()

	{

		var flag =  parent.document.getElementById('mainframe').getAttribute('flag');

		if(flag == 'false')

			window.frameElement.parentNode.setAttribute('this',document.body.scrollTop);

		else

			scrollTo(0,window.frameElement.parentNode.getAttribute('this'));		

		setTimeout("ff2()",1);

	}

	ff2();

</script>



我已测试成功！这需求真累人。。。。休息了。

#6

搞定了，3个页面：  test.html   f1.html   f2.html

代码如下：

test.html 
<frameset cols="50%,50%" id = "mainframe">

    <frame src="f1.html" id="f1" onmouseover="javascript:window.document.getElementById('mainframe').setAttribute('flag','true');">

    <frame src="f2.html" id="f2" onmouseover="javascript:window.document.getElementById('mainframe').setAttribute('flag','false');">

</frameset><noframes></noframes>


f1.html 
<div id="d1">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>

<script language="javascript">

	function ff1()

	{

		var flag =  parent.document.getElementById('mainframe').getAttribute('flag');

		if(flag == 'true')

			window.frameElement.parentNode.setAttribute('this',document.body.scrollTop);

		else

			scrollTo(0,window.frameElement.parentNode.getAttribute('this'));

		setTimeout("ff1()",1);

	}

	ff1();

</script>



f2.html 
<div id="d2">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>

<script language="javascript">

	function ff2()

	{

		var flag =  parent.document.getElementById('mainframe').getAttribute('flag');

		if(flag == 'false')

			window.frameElement.parentNode.setAttribute('this',document.body.scrollTop);

		else

			scrollTo(0,window.frameElement.parentNode.getAttribute('this'));		

		setTimeout("ff2()",1);

	}

	ff2();

</script>



我已测试成功！这需求真累人。。。。休息了。

#7

该回复于2007-12-20 14:05:06被版主删除

#8

先谢谢yzj520hyy .可是为什么我复制你的代码到本机测试无法实现2边同时上下移动,只是好像会过一段时间自己跳到顶端.是不是漏贴了部分代码?再次感谢

#9

艾,我这试了都不行,结贴吧..

#10

不错不错，正是需求中！！

#1

顶一下,没人帮我么?

#2

<head>

    <script language="javascript">

        function init()

        {

            frames[0].document.body.innerHTML = "<div style=height:2000px></div>"

            frames[1].document.body.innerHTML = "<div style=height:2000px></div>"

            frames[0].document.body.onscroll = doFrameScroll;

            frames[1].document.body.onscroll = doFrameScroll;

        }

        function doFrameScroll()

        {

            var index = (this == frames[0].document.body) ? 0 : 1;

            frames[1 - index].document.body.scrollTop = frames[index].document.body.scrollTop;

        }

    </script>

</head>

<frameset cols="50%,50%" onload="init()">

    <frame src="about:blank">

    <frame src="about:blank">

</frameset>
你试下看可以不

#3

谢谢楼上,但是不行啊,不能同步滚动,而且里面内容也不见了..

#4

其实我只要实现类似功能,左右分2块,每块都有横向滚动条和纵向滚动条,2块的纵向滚动条要求同步滚动就行了.横向*滚动

#5

搞定了，3个页面：  test.html   f1.html   f2.html

代码如下：

test.html 
<frameset cols="50%,50%" id = "mainframe">

    <frame src="f1.html" id="f1" onmouseover="javascript:window.document.getElementById('mainframe').setAttribute('flag','true');">

    <frame src="f2.html" id="f2" onmouseover="javascript:window.document.getElementById('mainframe').setAttribute('flag','false');">

</frameset><noframes></noframes>


f1.html 
<div id="d1">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>

<script language="javascript">

	function ff1()

	{

		var flag =  parent.document.getElementById('mainframe').getAttribute('flag');

		if(flag == 'true')

			window.frameElement.parentNode.setAttribute('this',document.body.scrollTop);

		else

			scrollTo(0,window.frameElement.parentNode.getAttribute('this'));

		setTimeout("ff1()",1);

	}

	ff1();

</script>



f2.html 
<div id="d2">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>

<script language="javascript">

	function ff2()

	{

		var flag =  parent.document.getElementById('mainframe').getAttribute('flag');

		if(flag == 'false')

			window.frameElement.parentNode.setAttribute('this',document.body.scrollTop);

		else

			scrollTo(0,window.frameElement.parentNode.getAttribute('this'));		

		setTimeout("ff2()",1);

	}

	ff2();

</script>



我已测试成功！这需求真累人。。。。休息了。

#6

搞定了，3个页面：  test.html   f1.html   f2.html

代码如下：

test.html 
<frameset cols="50%,50%" id = "mainframe">

    <frame src="f1.html" id="f1" onmouseover="javascript:window.document.getElementById('mainframe').setAttribute('flag','true');">

    <frame src="f2.html" id="f2" onmouseover="javascript:window.document.getElementById('mainframe').setAttribute('flag','false');">

</frameset><noframes></noframes>


f1.html 
<div id="d1">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>

<script language="javascript">

	function ff1()

	{

		var flag =  parent.document.getElementById('mainframe').getAttribute('flag');

		if(flag == 'true')

			window.frameElement.parentNode.setAttribute('this',document.body.scrollTop);

		else

			scrollTo(0,window.frameElement.parentNode.getAttribute('this'));

		setTimeout("ff1()",1);

	}

	ff1();

</script>



f2.html 
<div id="d2">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>

<script language="javascript">

	function ff2()

	{

		var flag =  parent.document.getElementById('mainframe').getAttribute('flag');

		if(flag == 'false')

			window.frameElement.parentNode.setAttribute('this',document.body.scrollTop);

		else

			scrollTo(0,window.frameElement.parentNode.getAttribute('this'));		

		setTimeout("ff2()",1);

	}

	ff2();

</script>



我已测试成功！这需求真累人。。。。休息了。

#7

该回复于2007-12-20 14:05:06被版主删除

#8

先谢谢yzj520hyy .可是为什么我复制你的代码到本机测试无法实现2边同时上下移动,只是好像会过一段时间自己跳到顶端.是不是漏贴了部分代码?再次感谢

#9

艾,我这试了都不行,结贴吧..

#10

不错不错，正是需求中！！
标签：

相关文章