這是來自論壇上的一個問題，問題要求多個不同的頁面，在打開子頁面時，要共用同一個窗口，並且子窗口不能刷新。這跟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中的腳本不能少，而且是很關鍵的地方。
以上代碼有點繞，希望沒有把讀者繞糊塗了。^_^