Open Child Window

子視窗的開啟與關閉

子視窗開啟

母子視窗的交互操作技術上並不困難，只是牽涉稍多，比較零碎，因此我不做太多的解釋，只把相關的控制方法蒐集在這一個範例中，應該你能很容易理解才對。首先我們講如何開啟子視窗，開子視窗用的是 window.open() 方法，完整的敘述是：

變數名稱=window.open("網頁 URL 字串","視窗名稱","視窗樣式設定參數");

變數名稱是用一個變數去記錄子視窗的物件參照，俾便稍後由母視窗操作子視窗的動作。
"網頁 URL 字串" 是指在子視窗中要顯示的網頁。
"視窗名稱" 可以指定子視窗的名稱，如果目前的執行程式並無此名稱的 window，則會開一個新視窗，如果已有此名稱的 window，就會把網頁開在此名稱的 window 中。
"視窗樣式設定參數" 可以決定新視窗的高寬度、起點座標......等顯示方式，視窗顯示參數如何設定，請參考新視窗開啟模式選項列表。

所以你可以安排個按鈕去啟動新視窗的開啟如下：

var childWindow;
<INPUT TYPE=BUTTON VALUE="開啟子視窗" onclick="childWinodw=window.open('子網頁 URL');">

本說明頁開啟時有個 "母視窗範例網頁" 也會伴隨開啟，如果你已關閉了，按這裡重新開啟範例後，按範例網頁的 [開啟子視窗] 鈕試試。

關閉子視窗

關閉已開啟的子視窗要比開新視窗就單純多了，只要執行 window.close() 方法即可，什麼參數都不用加。問題是當我們執行 window.close() 時，是關閉網頁本身所在之視窗，如果在瀏覽器中開啟不只一個視窗時，你就必須告訴瀏覽器，你要關的是那個視窗。怎麼指定關閉那個視窗呢？那就是在開啟視窗的同時，用一個變數去接收新視窗開啟時傳回的視窗物件參照。所以沒開前先就想怎麼關，就是成功執行子視窗關閉的必須手續。譬如：

/* 先在函式外宣告一個可供所有函式存取的變數 */
var childWindow;

/* 用變數接收子視窗物件參照 */
childWindow=window.open("子網頁 URL",......);

/* 關閉 childWindow 變數參照到的那個子視窗 */
childWindow.close();

現在就請你切換到 "母視窗範例網頁" 按 [關閉子視窗] 鈕試試。

關閉子視窗可能引發的 Script 錯誤

用 Script 打開一個子視窗，使用完畢關閉它，順理成章，怎麼會引發錯誤呢？如果所有的子視窗開啟關閉都完全由 Script 操作，當然不會有錯誤。問題是網頁的操作一定要考慮瀏覽者的狀況，如果瀏覽者還沒開子視窗就按了關閉子視窗，或是當瀏覽者在子視窗瀏覽中已關閉了網頁，在母視窗他又按了關閉鈕，這些非預期的操作，都是我們在操作子母視窗時要顧慮到的狀況。下面我們就分別來說明錯誤產生的原因及解決之道：

沒開就關
關了又關

綜合的視窗開啟狀態檢查函式

/* 檢查目前視窗開啟狀態函式，參數 win 為傳入之視窗物件參照變數。 */
function ChildWindowState(win)
{
    /* 視窗尚未開啟傳回值為 0 */
    var result=0;
    /* 視窗已開啟 */
    if (win)
    /* 視窗已被關閉傳回值 1，未被關閉傳回值 2 。 */
    {result=(win.closed)?1:2;}
    return result;
}

/* childWindow 為視窗物件參照變數 */
var state=ChildWindowState(childWindow)
/* 只有當子視窗被開啟過，並且尚未關閉，才執行關閉子視窗程序。 */
if (state==2) {childWindow.close();}

視窗間的資訊交換

一旦在網頁中以 window.open() 方式開啟一個新的網頁視窗，兩個視窗就形成親子關係，也就具備了兩個視窗間彼此可以互相呼叫，交換彼此資訊的關係，例如：

取得及設定另一視窗網頁元件的資訊
取得及設定另一視窗跨函式的變數值
執行另一視窗的功能函式

而兩個視窗彼此呼叫對方物件的進入點，就是 window 物件參照，就 parent window 來說，必須用一變數在 window.open 之時，接收 open 方法傳回之子視窗參照(本範例中為 childWindow 變數)。而就 child window 來說，你不須執行任何敘述來取得母視窗參照，瀏覽器已幫所有網頁視窗準備好 opener 這個物件，做為母視窗的參照。下面幾節，我們就談談如何利用視窗物件來交換各種視窗資訊。

取得及設定另一視窗網頁元件的資訊

由母視窗取得子視窗元件資訊

由母視窗設定子視窗元件資訊

childWindow.document.forms.form1.elements.changebox.value="新字串值"

現在你可以再切換到 "母視窗範例網頁" 開啟子視窗，然後分別在兩邊的訊息交換框輸入些資料，然後按讀取或設定按鈕，看看會發生什麼事。

取得及設定另一視窗跨函式的變數值

由母視窗取得子視窗變數值
由母視窗設定子視窗變數值

現在你：

切到子視窗範例頁，顯示一下子視窗的跨函式變數。
切回母視窗範例頁，顯示一下子視窗的跨函式變數。
在母視窗範例頁的訊息交換框輸入些字串，按 [設定子視窗變數值] 鈕。
切到子視窗範例頁，顯示一下子視窗的跨函式變數。
切回母視窗範例頁，顯示一下子視窗的跨函式變數。

執行另一視窗的功能函式

在母視窗中執行子視窗附屬的功能函式，就跟取得子視窗變數值一樣，敘述是 childWindow.函式名稱() (不要忘了要加上 "()" 字符結尾 )。我在子視窗範例頁安排了個 ClearChangebox 函式，功能是清除子視窗訊息交換框的輸入資料，如果我們要在母視窗中執行子視窗的此一功能函數，執行下列敘述即可。

childWindow.ClearChangebox();

現在請：

切換到子視窗，在訊息交換框輸入些資料。
按子視窗的清除鈕，清除訊息交換框裏的資料。
再在訊息交換框輸入些資料。
切換到母視窗，按 [清除子視窗訊息框] 鈕，清除子視窗訊息交換框。

其他注意事項

由子視窗操作母視窗

載入網頁時自動開啟子網頁

<BODY onload="開啟子網頁的函式();">

載出網頁時自動關閉子網頁

<BODY onunload="關閉子網頁的函式();">

避免網頁撞車

回前頁