这是来自论坛上的一个问题,问题要求多个不同的页面,在打开子页面时,要共用同一个窗口,并且子窗口不能刷新。这跟google音乐里面的添加音乐,然后播放的效果类似。因为在播放音乐的时候,如果子页面刷新了,那么音乐必须从头来播放,自然效果不尽人意。类似的情况也会出现在视频的网站上。
下面,我们使用简单的Javascript代码来实现这一功能。本代码在目前所有主流浏览器里测试通过。
下面,先创建一个测试主页面,Test1.htm
XML/XHTML 代码
<!
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
>
<
title
></
title
>
<
script
type
="text/javascript"
>
function winOpen() {
window.open("winA.htm?music=From_Test1_" + (new Date()).toLocaleString(), "mxh", "width=600,height=300")
}
</
script
>
</
head
>
<
body
>
<
input
type
="button"
onclick
="winOpen()"
value
="打开子窗口"
/>
</
body
>
</
html
>
接下来,创建WinA.htm
XML/XHTML 代码
<!
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
>
<
title
>
Window A
</
title
>
</
head
>
<
body
>
<
h1
>
这里是Window A
</
h1
>
<
script
type
="text/javascript"
>
if (window.location.href == window.top.location.href) {
self.top.location.href = "winB.htm" + window.location.search
}
else {
window.parent.frames["mxh2"].setMusic(window.location.search.substr(1))
}
</
script
>
</
body
>
</
html
>
接下来是WinB.htm
XML/XHTML 代码
<!
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
>
<
title
>
Window B
</
title
>
</
head
>
<
body
>
<
iframe
name
="mxh2"
src
="winC.htm"
style
="width:600px;height:400px;"
frameborder
="0"
></
iframe
>
<
iframe
name
="mxh"
src
="winD.htm"
style
='display:none'
></
iframe
>
<
script
type
="text/javascript"
>
alert("页面刷新检测器")
</
script
>
</
body
>
</
html
>
WinC.htm
XML/XHTML 代码
<!
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
>
<
title
>
Window C
</
title
>
</
head
>
<
body
>
<
div
id
="showContent"
>
初始化的内容
</
div
>
<
script
type
="text/javascript"
>
function setMusic(str) {
document.getElementById("showContent").innerHTML += "
<
br
/>
" + str
}
</
script
>
</
body
>
</
html
>
WinD.htm
XML/XHTML 代码
<!
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
>
<
title
>
Window D
</
title
>
</
head
>
<
body
>
<
script
type
="text/javascript"
>
window.name = "mxh";
window.top.name = "";
window.top.focus();
</
script
>
</
body
>
</
html
>
然后可以创建多个测试用的页面Test2.htm
XML/XHTML 代码
<!
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
>
<
title
></
title
>
<
script
type
="text/javascript"
>
function winOpen() {
window.open("winA.htm?music=From_Test2_" + (new Date()).toLocaleString(), "mxh", "width=600,height=300")
}
</
script
>
</
head
>
<
body
>
<
input
type
="button"
onclick
="winOpen()"
value
="打开子窗口"
/>
</
body
>
</
html
>
在不同的窗口里,打开测试页面,则,都会将内容显示在Window B所在的主体窗口内。并且页面是不刷新的。其原理就是将新开的页面在隐藏的窗口里打开,然后取出来传递的参数,使用javascript来进行数据的传递。其中窗口WinD.htm中的脚本不能少,而且是很关键的地方。
以上代码有点绕,希望没有把读者绕糊涂了。^_^