你有時(shí)需要打開(kāi)一個(gè)新的瀏覽器窗口，用來(lái)顯示信息或廣告，但是在這里我要提醒你一下，大部分人在瀏覽一個(gè)網(wǎng)站的時(shí)候，是不會(huì )注意彈處的新窗口里邊寫(xiě)些什么，他們會(huì )很快地關(guān)掉窗口，只有少數的人會(huì )留意這些彈出的窗口。然而，這項技術(shù)還是很不錯的。
【彈出窗口的小測試】
在這個(gè) 在線(xiàn)示例 中，我們給出一個(gè)小測試問(wèn)題的列表，對應于每一個(gè)問(wèn)題都一個(gè)顯示答案的超鏈接，而這些超鏈接將會(huì )彈出一個(gè)小窗口來(lái)顯示答案，看一看代碼就清楚了。
實(shí)際上，每一個(gè)答案的超鏈接都調用了同一個(gè)函數 showAnswer()，通過(guò)傳遞的參數 url (此參數是答案所在的頁(yè)面的地址 URL) 的不同，在彈出的小窗口中顯示不同的頁(yè)面；在這個(gè)函數中使用了 window.open() 方法來(lái)創(chuàng )建新的窗口：
function showAnswer(url) {
window.open(url, "answer", "height=100,width=100,directories=no," +
"location=no,menubar=no," +
"resizeable=no,status=no,toolbar=no");
return false;
} open() 方法有三個(gè)參數：打開(kāi)窗口中的頁(yè)面地址 URL (包括路徑和文件名)，給新窗口取的一個(gè)英文名字，打開(kāi)的窗口的一些屬性設置 (如窗口的高度、寬度、是否顯示滾動(dòng)條、是否顯示瀏覽器的菜單欄等等)。
新窗口的名字在某些時(shí)候可能會(huì )用到，在別的窗口中使用 TARGET="新窗口的名字" 使超鏈接所鏈接的頁(yè)面在新窗口中顯示，描述窗口特性的參數是一個(gè)包含關(guān)鍵字和關(guān)鍵字值的字符串，各個(gè)關(guān)鍵字之間使用英文逗號 (,) 隔開(kāi)，使用這個(gè)參數的時(shí)候一定要小心，各個(gè)關(guān)鍵字、關(guān)鍵字值、逗號之間千萬(wàn)不要有空格。
注意：此例中的 “+” 好只是為了代碼能夠換行書(shū)寫(xiě)才加上的，其實(shí)它們只是連結字符串而已，沒(méi)有別的，不使用 “+” 好一樣是可以的。
窗口特性 (即是打開(kāi)的瀏覽器的樣子) 的關(guān)鍵字、關(guān)鍵字值可以參考下表：
如果在字符串中給定了這些值的話(huà)，窗口就會(huì )按你定義的現實(shí)，否則將會(huì )使用默認的值，想要進(jìn)一步了解這方面的信息請參考 Netscape‘s JavaScript Guide ！
【給窗口指定頁(yè)面】
當你使用上面的方法創(chuàng )建了一個(gè)新窗口之后，你還可以再次給這個(gè)窗口指定新的頁(yè)面，這就要用到 open() 方法的返回值了，請看下邊的代碼：
myWin = window.open(url, "", "height=100,width=100");
...
myWin.location = "newpage.html"; 上邊的代碼將打開(kāi)的新窗口的頁(yè)面重新指定為 newpage.html，這樣窗口中就會(huì )顯示頁(yè)面 newpage.html了。同時(shí)，在打開(kāi)的新窗口中，你也可以通過(guò)使用 window 對象的 opener 屬性將窗口對象指向打開(kāi)此窗口的母窗口，這樣也就可以對母窗口的數據或函數進(jìn)行操作了，例如下邊的代碼中就是將母窗口的頁(yè)面重新指定為 newpage.html：
window.opener.location = "newpage.html";
【關(guān)閉一個(gè)窗口】
再讓我們看一下前邊的 在線(xiàn)示例 中我們所打開(kāi)的新窗口，你會(huì )窗口中沒(méi)有菜單欄，那我們該如何將此窗口關(guān)掉呢？不用擔心，我們可以使用 window 對象的 close() 方法來(lái)關(guān)閉打開(kāi)的小窗口，那個(gè) “關(guān)閉窗口！” 按鈕中就是使用了此方法：
<form>
<input type=submit value="關(guān)閉此窗口" onClick="window.close(); return false;">
</form> 當你按下按鈕后，就會(huì )觸發(fā) onClick 事件，從而調用 window 對象的 close() 方法，此方法將當前的窗口關(guān)閉掉。
正如我們在前邊的章節中提到的那樣，frame 幀其實(shí)是單獨的窗口，它對應于單獨的窗口對象，有自己的 location、history 和 document 屬性。
在這個(gè) 在線(xiàn)示例 中你將會(huì )看到一系列的幀，代碼如下：
<html> <frameset rows="300,*"> </html>
<head>
<title></title>
</head>
<frame name="a" src="example3-2a.html">
<frameset cols="33%,33%,33%">
<frame name="b" src="example3-2b.html">
<frame name="c" src="example3-2c.html">
<frame name="d" src="example3-2d.html">
</frameset>
</frameset>
至于幀的結構、幀是如何分布的等等問(wèn)題這里就不多講了，我們希望你能查看一下例子中的源代碼，你會(huì )發(fā)現幀 A 中有一個(gè)名為 setFrameColor() 的函數，它的作用是用來(lái)改變幀 B、幀 C、幀 D 的背景色，參數 fname 為目標幀的名字，參數 color 為目的背景顏色：
function setFrameColor(fname, color) { window.parent.frames[fname].document.bgColor = color;
return false;
}
我們通過(guò)當前幀 (幀 A) 的 window.parent 屬性指定到頂部的幀 (frameset，此幀包含了A、B、C、D四個(gè)幀) ，然后通過(guò)頂部幀的 frames 數組加上幀的名字 fname 指定目標幀 (幀 B、C、D)，最后通過(guò)目標幀的 document.bgColor 屬性改變該幀的背景色。
下圖很直觀(guān)地顯示了我們上邊所講的幀對象的指定關(guān)系：
【引用別的幀/窗口的變量和函數】
你不只是可以引用別的幀/窗口的 document、window 對象，而且還可以訪(fǎng)問(wèn)使用別的幀/窗口的變量和函數。
現在我們將上邊的例子修改一下，請看 在線(xiàn)示例 。在新的例子中，我們給下邊的三個(gè)幀都加了一個(gè)按鈕，用來(lái)恢復各個(gè)幀的默認背景色，按下這些按鈕后，將會(huì )調用幀 A 中的函數 setFrameColor()。下邊就是調用幀 A 中 setFrameColor() 函數的代碼：
window.parent.frames["A"].setFrameColor(window.name, "#ffffff");
正如你所看到的，我們使用了與前邊一樣的技巧。首先使用 window.parent 指向頂層的幀 (frameset)，然后使用 frames["A"] 指向幀 A，然后在后邊加上幀 A 中的函數 setFrameColor()，并且加上兩個(gè)參數，這樣就可以運行幀 A 中的函數了。
需要注意的是函數 setFrameColor() 中使用的類(lèi)似 window.name 的語(yǔ)句，這個(gè)名字和 frames[] 數組中使用的是相同的名字，同時(shí)這個(gè)名字還是 <FRAME> 標記中通過(guò) NAME="幀的英文名" 設置的名字。
下邊是與幀相關(guān)的第二個(gè)例子的關(guān)系圖：
類(lèi)似地，你也可以使用相同的方法使用別的窗口/幀里邊的全局變量，只需要將上邊例中的函數名改成全局變量名即可。
window 對象的 location 和 history 屬性
window對象的 location 屬性包含了當前頁(yè)面的地址 (URL) 信息，你可以直接改變此屬性值，將其設置成新的地址 (URL)：
window.location = "http://www.yahoo.com";
或者
location = "http://www.yahoo.com";
你還可以通過(guò)下邊的兩種方法中的任何一種來(lái)使瀏覽器從服務(wù)器上下載 (Load) 頁(yè)面：
使用 replace() 方法意味著(zhù)用戶(hù)將不能通過(guò)按 “返回” 按鈕回到前邊瀏覽過(guò)的那個(gè)頁(yè)面，但這并不是說(shuō)用戶(hù)完全不能回到原來(lái)的所有頁(yè)面，他們只不過(guò)是無(wú)法回到被 replace() 方法替換的那一個(gè)頁(yè)面 (注意：只是被替換的那一個(gè)頁(yè)面)。
表面上看起來(lái)這種方法并不是很有用，而且好像還有點(diǎn)令人討厭，但是，在一些特殊的情況下這種方法卻是很有用的?？纯催@個(gè) 在線(xiàn)示例 就知道了，此例中使用 setTimeout() 方法每個(gè)三秒鐘就下載一個(gè)新的頁(yè)面，讓程序運行一段時(shí)間，然后點(diǎn)擊瀏覽器的 “后退” 按鈕，你會(huì )看到瀏覽器的歷史記錄，好多好多，你再試著(zhù)通過(guò)鼠標點(diǎn)擊回到開(kāi)始的頁(yè)面，怎么樣，回去了嗎？好像比較麻煩，因為有一大堆的頁(yè)面在那里擋著(zhù)。
想要解決這個(gè)問(wèn)題可以使用 replace() 方法，看一下這個(gè)改進(jìn)后的 在線(xiàn)示例 就知道了，新的例子中，你只需點(diǎn)擊一次 “后退” 按鈕即可以回到最初的頁(yè)面了。
【history 對象】
history 對象是一個(gè)很有用的對象，此對象記錄著(zhù)瀏覽器所瀏覽過(guò)的每一個(gè)頁(yè)面，這些頁(yè)面組成了一個(gè)歷史記錄列表。history 對象具有兩種方法：
而還有一個(gè) go() 方法也可以控制歷史紀錄，而且功能更加強大，使用此方法需要一個(gè)參數，這個(gè)參數值可以是正負整數、零和字符串，例如 history.go(-2) 將是當前頁(yè)后退兩頁(yè)；如果給定的參數是字符串，那么瀏覽器就會(huì )搜索列表，找到最接近當前頁(yè)面位置的并且地址 URL 中含有此字符串的頁(yè)面，然后轉到該頁(yè)面。
請看，下邊的兩條語(yǔ)句是等價(jià)的：
history.go(-1);
history.back(); 下邊的代碼將頁(yè)面轉到距離本頁(yè)面位置最近的同時(shí)頁(yè)面地址 URL 中含有字符串 "netscape" (不區分字母的大小寫(xiě)) 的頁(yè)面：
history.go("netscape");
在使用這三個(gè)方法的時(shí)候，如果沒(méi)有找到符合條件的歷史記錄的話(huà)，將不會(huì )發(fā)生任何變化，不會(huì )改變當前的頁(yè)面，也不會(huì )顯示錯誤。
小技巧：如果在你的網(wǎng)站中有很多頁(yè)面，那么提供一個(gè) “返回” 功能是很必要的，這樣可以方便用戶(hù)瀏覽你的網(wǎng)站，但是你并不知道用戶(hù)是從哪一個(gè)頁(yè)面來(lái)到當前頁(yè)面的，于是你就不能使用 <A HREF="頁(yè)面的地址">...</A> 的方式來(lái)做超鏈接了，但是可以使用下邊的代碼來(lái)做 “返回” 的超鏈接：
<a href="#" onClick="history.back(); return false;">返回</a>
你可以使用 window 對象的 scroll() 方法使窗口/幀的內容滾動(dòng)，這種滾動(dòng)可以是水平方向的也可以是垂直方向的，在這個(gè) 在線(xiàn)示例 中，幀里邊的美國各個(gè)城市天氣變化的內容將會(huì )不停的滾動(dòng)。
此例中，當頁(yè)面滾動(dòng)到一定的值 (此例中為 750 像素) 的時(shí)候，又將頁(yè)面重新設置成最初的樣子 (即坐標值為：(0,0))，這樣看起來(lái)就是不停的滾動(dòng)了?？上У氖?，并不是所有的瀏覽器都提供實(shí)際的頁(yè)面高和寬的像素值，所以你要親自實(shí)踐一下看看這些值要多大才合適。
你還可以重新書(shū)寫(xiě)一個(gè)頁(yè)面中的內容，這就要用到 document 對象的 write() (此方法輸出的時(shí)候不換行) 和 writeln() (此方法輸出完成后自動(dòng)換行)方法了。這兩個(gè)方法需要一個(gè)字符串參數，這個(gè)參數就是要在頁(yè)面中輸出的字符串，可以在字符串中帶上HTML代碼，那樣輸出的結果就和其它網(wǎng)頁(yè)是一樣的了，看看這個(gè) 在線(xiàn)示例 ，查看一下源代碼就知道了。這個(gè)例子中是上邊的幀通過(guò) writeln() 方法向下邊的幀輸出內容。
在此例中，你可以試一試輸入一些 HTML 代碼，看看有什么效果！比如說(shuō)輸入下邊的代碼：
<script>
alert("Hi mom!");
</script> 在下邊幀上，點(diǎn)擊鼠標右鍵，查看一下源代碼，你會(huì )發(fā)現源代碼就是你輸入的那些字符。
在函數 rewriteFrame() 中，有如下語(yǔ)句：
window.parent.frames["text"].document.writeln(document.forms[0].text.value);
window.parent.frames["text"].document.close();
第一條語(yǔ)句是將表單 (form) 的 text 中輸入的內容寫(xiě)到下邊的幀中，第二行代碼是調用 document.close() 的方法告訴瀏覽器向頁(yè)面寫(xiě)的操作已經(jīng)結束。如果你想要是你的輸入覆蓋掉以前的，那就要使用 document 對象的 close() 方法。
【一個(gè)小小的改進(jìn)】
你可能會(huì )注意到上邊的例子中，當你點(diǎn)擊瀏覽器的后退按鈕的時(shí)候，你會(huì )看到你的每一次 “提交” 動(dòng)作都產(chǎn)生了一個(gè)新的頁(yè)面，他們都留在了歷史記錄中，所以像前邊說(shuō)的一樣，你要按很多此 “后退” 才能會(huì )回到最初的頁(yè)面，如果你想除掉這種情況，可以使用 document 對象的 open() 方法，只要在 rewriteFrame() 中加一條語(yǔ)句即可：
window.parent.frames["text"].document.open("text/html", "replace");
window.parent.frames["text"].document.writeln(document.forms[0].text.value);
window.parent.frames["text"].document.close();
open() 方法的第一個(gè)參數值 "text/html" 是用來(lái)告訴瀏覽器準備接受 HTML 數據，而第二個(gè)參數值 "replace" 告訴瀏覽器不要將新寫(xiě)入的頁(yè)面加入到瀏覽器的歷史記錄列表中，和 location.replace(URL) 是很相似的，功能是一樣的，請看改進(jìn)后的 在線(xiàn)示例 。
聯(lián)系客服
