總結：子視窗建立及父視窗與子視窗之間通訊
阿新 • • 發佈：2018-11-05
1、Javascript彈出子視窗
可以通過多種方式實現，下面介紹幾種方法
(1) 通過window物件的open()方法，open()方法將會產生一個新的window視窗物件
其用法為：
window.open(URL,windowName,parameters);
URL: 描述要開啟的視窗的URL地址，如何為空則不開啟任何網頁；
windowName:描述被開啟的視窗的民稱，可以使用'_top'、'_blank'等內建名稱，這裡的名稱跟<a href="..." target="...">裡的target屬性是一樣的。
parameters:描述被開啟的視窗的引數值，或者說是樣貌，其包括視窗的各個屬性值，及要傳入的引數值。
例如：
開啟一個 400 x 100 的乾淨的視窗：
open('','_blank','width=400,height=100,menubar=no,toolbar=no,
location=no,directories=no,status=no,scrollbars=yes,resizable=yes')
也可以這樣寫： var newWindow = open('','_blank');
引數說明如下：
top=# 視窗頂部離開螢幕頂部的畫素數
left=# 視窗左端離開螢幕左端的畫素數
width=# 視窗的寬度
height=# 視窗的高度
menubar=... 視窗有沒有選單，取值yes或no
toolbar=... 視窗有沒有工具條，取值yes或no
location=... 視窗有沒有位址列，取值yes或no
directories=... 視窗有沒有連線區，取值yes或no
scrollbars=... 視窗有沒有滾動條，取值yes或no
status=... 視窗有沒有狀態列，取值yes或no
resizable=... 視窗給不給調整大小，取值yes或no
(2) 在javascript中除了通過open()方法建立window物件實現彈出視窗外，還可以通過建立對話方塊的方式彈出視窗。
如：
alert(""); //彈出資訊提示對話方塊
confirm(""); //彈出資訊確認對話方塊
prompt(""); //具有互動性質的對話方塊
但是，上述實現的彈出視窗具有的功能較為單一，只能完成較為簡單的功能。對於需要在對話方塊中顯示多個數據信息，
甚至是HTML控制元件就無能為力了。
(3) 使用模態對話方塊實現複雜的對話方塊需求
在javascript的內建方法中還有一類方法可以實現通過對話方塊顯示HTML內容，
也就是說可以通過建立對話方塊的方式來完成建立視窗物件所能完成的功能。
包括建立模態對話方塊和非模態對話方塊兩種。
實現方法為：
//建立模態你對話方塊
window.showModalDialog(sURL,vArguments,sFeatures)
//建立非模態對話方塊
window.showModelessDialog(sURL,vArguments,sFeatures)
其區別在於：
用showModelessDialog()開啟視窗時，不必用window.close()去關閉它，當以非模態方式［IE5］開啟時， 開啟對話方塊
的視窗仍可以進行其他的操作，即對話方塊不總是最上面的焦點，當開啟它的視窗URL改變時，它自動關閉。而模態［IE4］方式的對話方塊始終有焦點（焦點不可移走，直到它關閉）。模態對話方塊和開啟它的視窗相聯絡，因此我們開啟另外的視窗時，他們的連結關係依然儲存，並且隱藏在活動視窗的下面。 showModeDialog()則不然。
引數說明：
sURL：必選引數，型別：字串。
用來指定對話方塊要顯示的文件的URL。
vArguments：可選引數，型別：變體。
用來向對話方塊傳遞引數。傳遞的引數型別不限，包括陣列等。對話方塊通過window.dialogArguments來取得傳遞進來的引數。
sFeatures：選引數，型別：字串。
用來描述對話方塊的外觀等資訊，可以使用以下的一個或幾個，用分號“;”隔開。
dialogHeight：對話方塊高度
不小於100px，IE4中dialogHeight和dialogWidth 預設的單位是em，而IE5中是px，為方便其見，在定義modal方式的對話方塊時，用px做單位。
dialogWidth: 對話方塊寬度。
dialogLeft: 距離桌面左的距離。
dialogTop: 離桌面上的距離。
center: 視窗是否居中
預設yes，但仍可以指定高度和寬度,取值範圍{yes | no | 1 | 0 }。
help: 是否顯示幫助按鈕
預設yes，取值範圍 {yes | no | 1 | 0 }。
resizable: 是否可被改變大小。
預設no，取值範圍 {yes | no | 1 | 0 } ［IE5+］。
status: 是否顯示狀態列。
預設為yes[ Modeless]或no[Modal]，
取值範圍{yes | no | 1 | 0 } ［IE5+］。
scroll:指明對話方塊是否顯示滾動條。
預設為yes，取值範圍{ yes | no | 1 | 0 | on | off }。
還有幾個屬性是用在HTA中的，在一般的網頁中一般不使用。
dialogHide:在列印或者列印預覽時對話方塊是否隱藏。
預設為no，取值範圍{ yes | no | 1 | 0 | on | off }。
edge:指明對話方塊的邊框樣式。
預設為raised，取值範圍{ sunken | raised }。
unadorned:預設為no，取值範圍{ yes | no | 1 | 0 | on | off }。
傳入引數：
要想對話方塊傳遞引數，是通過vArguments來進行傳遞的。型別不限制，對於字串型別，最大為4096個字元。也可以傳遞物件
例如：
var newWin=window.showModalDialog(url,window,'dialogHeight:500px, dialogLeft:100px, dialogTop:100px,
dialogWidth:300px, status:0, edge:sunken');
newWin.open();
與使用window.open()方法建立視窗相比，模態方法建立視窗的區別在於有模態方法建立的視窗後將不能操作父視窗.
2、子視窗與父視窗間通訊
(1) 使用window.open()建立的視窗與父視窗通訊
可以在子視窗頁面中通過window.opener來獲取父視窗物件，獲取之後子視窗便可以對父視窗執行重新整理，傳值等操作。
如：
window.opener.location.reload(); //子視窗重新整理父視窗
window.opener.location.href //獲取父視窗href
window.opener.locaiton.pathname //獲取父視窗路徑名
//重新整理父頁面
window.location.href=window.location.href ; //重新定位父頁面
window.location.reload;
(2) 模態視窗與父視窗通訊
通過使用showModelDialog(),及showModelessDialog（）方法建立的子視窗想與父視窗通訊時，不能通過window.opener
來獲取父視窗物件。要實現通訊，必須在建立模態子視窗時向子視窗傳入父視窗物件。
實現方式為：
在父視窗中：
var newWin=window.showModelDialog(url,window,'');
newWin.open();
此時引數window即是父視窗物件
在子視窗中：
需首先獲取父視窗物件，然後才能使用父視窗物件。由於父視窗物件是在建立
子視窗時通過傳入引數的方式傳入的，因此，在子視窗中也只能通過獲取視窗引數的方式獲取父視窗物件。獲取方式如下
：
var parent=widnow.dialogArguments；
變數parent便是父視窗物件。
例如：
//通過子視窗提交父視窗中的表單：form1,提交後執行查詢操作
var parent=window.dialogArguments;
parent.document.form1.action="QueryInfor.jsp";
parent.submit();
//重新整理父頁面
var parent=window.dialogArguments;
parent.location.reload();
//從子視窗傳值到父視窗
要實現在模態子視窗中傳值到父視窗，需要使用window.returnValue完成
實現方法如下：
在子視窗中：
//獲取父視窗某欄位值，對該值加一後返回父視窗
var parent=window.dialogArguments;
var x=parent.docuement.getElementById("age").value;
x=x+1；
//傳回x值
window.returnValue=x;
在父視窗中：
//獲取來自子視窗的值
var newWin=window.showModelDialog(url,window,'');
if(newWin!=null)
document.getElementById("age").value=newWin;
//在子視窗中設定父視窗的值
在子視窗中向父視窗中傳入值似乎沒有直接設定父視窗中的值來得明瞭。直接設定父視窗中元素的值顯得要更靈活一些,不過具體使用哪種方法要根據實際情況和已有的實現方式而定，因為如果使用了不切實際的方法不僅降低開發效率，也降低了執行效率，往往也會造成不優雅的實現方式和程式碼風格。
子視窗設定父視窗的值使用方法如下：
子視窗中：
var parent=window.dialogArguments;
var x=parent.document.getElementById("age").value;
x=x+1；
//設定父視窗中age屬性值
parent.document.getElementById("age").value=x;
以上是我在專案中使用javascript解決子視窗問題時，收集及積累的一些方法和資料。我是使用建立模態視窗的方式來實現的（這主要與專案本身有關），不過其實不論是使用window.open()還是使用window.showModelDialog()進行傳參等操作時雖然在實現方法上有很大的差別，初次接觸會覺得有點亂，但只要理清子視窗與父視窗之間的關係和角色之後，就很好理解了。
可以通過多種方式實現，下面介紹幾種方法
(1) 通過window物件的open()方法，open()方法將會產生一個新的window視窗物件
其用法為：
window.open(URL,windowName,parameters);
URL: 描述要開啟的視窗的URL地址，如何為空則不開啟任何網頁；
windowName:描述被開啟的視窗的民稱，可以使用'_top'、'_blank'等內建名稱，這裡的名稱跟<a href="..." target="...">裡的target屬性是一樣的。
parameters:描述被開啟的視窗的引數值，或者說是樣貌，其包括視窗的各個屬性值，及要傳入的引數值。
例如：
開啟一個 400 x 100 的乾淨的視窗：
open('','_blank','width=400,height=100,menubar=no,toolbar=no,
location=no,directories=no,status=no,scrollbars=yes,resizable=yes')
也可以這樣寫： var newWindow = open('','_blank');
引數說明如下：
top=# 視窗頂部離開螢幕頂部的畫素數
left=# 視窗左端離開螢幕左端的畫素數
width=# 視窗的寬度
height=# 視窗的高度
menubar=... 視窗有沒有選單，取值yes或no
toolbar=... 視窗有沒有工具條，取值yes或no
location=... 視窗有沒有位址列，取值yes或no
directories=... 視窗有沒有連線區，取值yes或no
scrollbars=... 視窗有沒有滾動條，取值yes或no
status=... 視窗有沒有狀態列，取值yes或no
resizable=... 視窗給不給調整大小，取值yes或no
(2) 在javascript中除了通過open()方法建立window物件實現彈出視窗外，還可以通過建立對話方塊的方式彈出視窗。
如：
alert(""); //彈出資訊提示對話方塊
confirm(""); //彈出資訊確認對話方塊
prompt(""); //具有互動性質的對話方塊
但是，上述實現的彈出視窗具有的功能較為單一，只能完成較為簡單的功能。對於需要在對話方塊中顯示多個數據信息，
甚至是HTML控制元件就無能為力了。
(3) 使用模態對話方塊實現複雜的對話方塊需求
在javascript的內建方法中還有一類方法可以實現通過對話方塊顯示HTML內容，
也就是說可以通過建立對話方塊的方式來完成建立視窗物件所能完成的功能。
包括建立模態對話方塊和非模態對話方塊兩種。
實現方法為：
//建立模態你對話方塊
window.showModalDialog(sURL,vArguments,sFeatures)
//建立非模態對話方塊
window.showModelessDialog(sURL,vArguments,sFeatures)
其區別在於：
用showModelessDialog()開啟視窗時，不必用window.close()去關閉它，當以非模態方式［IE5］開啟時， 開啟對話方塊
的視窗仍可以進行其他的操作，即對話方塊不總是最上面的焦點，當開啟它的視窗URL改變時，它自動關閉。而模態［IE4］方式的對話方塊始終有焦點（焦點不可移走，直到它關閉）。模態對話方塊和開啟它的視窗相聯絡，因此我們開啟另外的視窗時，他們的連結關係依然儲存，並且隱藏在活動視窗的下面。 showModeDialog()則不然。
引數說明：
sURL：必選引數，型別：字串。
用來指定對話方塊要顯示的文件的URL。
vArguments：可選引數，型別：變體。
用來向對話方塊傳遞引數。傳遞的引數型別不限，包括陣列等。對話方塊通過window.dialogArguments來取得傳遞進來的引數。
sFeatures：選引數，型別：字串。
用來描述對話方塊的外觀等資訊，可以使用以下的一個或幾個，用分號“;”隔開。
dialogHeight：對話方塊高度
不小於100px，IE4中dialogHeight和dialogWidth 預設的單位是em，而IE5中是px，為方便其見，在定義modal方式的對話方塊時，用px做單位。
dialogWidth: 對話方塊寬度。
dialogLeft: 距離桌面左的距離。
dialogTop: 離桌面上的距離。
center: 視窗是否居中
預設yes，但仍可以指定高度和寬度,取值範圍{yes | no | 1 | 0 }。
help: 是否顯示幫助按鈕
預設yes，取值範圍 {yes | no | 1 | 0 }。
resizable: 是否可被改變大小。
預設no，取值範圍 {yes | no | 1 | 0 } ［IE5+］。
status: 是否顯示狀態列。
預設為yes[ Modeless]或no[Modal]，
取值範圍{yes | no | 1 | 0 } ［IE5+］。
scroll:指明對話方塊是否顯示滾動條。
預設為yes，取值範圍{ yes | no | 1 | 0 | on | off }。
還有幾個屬性是用在HTA中的，在一般的網頁中一般不使用。
dialogHide:在列印或者列印預覽時對話方塊是否隱藏。
預設為no，取值範圍{ yes | no | 1 | 0 | on | off }。
edge:指明對話方塊的邊框樣式。
預設為raised，取值範圍{ sunken | raised }。
unadorned:預設為no，取值範圍{ yes | no | 1 | 0 | on | off }。
傳入引數：
要想對話方塊傳遞引數，是通過vArguments來進行傳遞的。型別不限制，對於字串型別，最大為4096個字元。也可以傳遞物件
例如：
var newWin=window.showModalDialog(url,window,'dialogHeight:500px, dialogLeft:100px, dialogTop:100px,
dialogWidth:300px, status:0, edge:sunken');
newWin.open();
與使用window.open()方法建立視窗相比，模態方法建立視窗的區別在於有模態方法建立的視窗後將不能操作父視窗.
2、子視窗與父視窗間通訊
(1) 使用window.open()建立的視窗與父視窗通訊
可以在子視窗頁面中通過window.opener來獲取父視窗物件，獲取之後子視窗便可以對父視窗執行重新整理，傳值等操作。
如：
window.opener.location.reload(); //子視窗重新整理父視窗
window.opener.location.href //獲取父視窗href
window.opener.locaiton.pathname //獲取父視窗路徑名
//重新整理父頁面
window.location.href=window.location.href ; //重新定位父頁面
window.location.reload;
(2) 模態視窗與父視窗通訊
通過使用showModelDialog(),及showModelessDialog（）方法建立的子視窗想與父視窗通訊時，不能通過window.opener
來獲取父視窗物件。要實現通訊，必須在建立模態子視窗時向子視窗傳入父視窗物件。
實現方式為：
在父視窗中：
var newWin=window.showModelDialog(url,window,'');
newWin.open();
此時引數window即是父視窗物件
在子視窗中：
需首先獲取父視窗物件，然後才能使用父視窗物件。由於父視窗物件是在建立
子視窗時通過傳入引數的方式傳入的，因此，在子視窗中也只能通過獲取視窗引數的方式獲取父視窗物件。獲取方式如下
：
var parent=widnow.dialogArguments；
變數parent便是父視窗物件。
例如：
//通過子視窗提交父視窗中的表單：form1,提交後執行查詢操作
var parent=window.dialogArguments;
parent.document.form1.action="QueryInfor.jsp";
parent.submit();
//重新整理父頁面
var parent=window.dialogArguments;
parent.location.reload();
//從子視窗傳值到父視窗
要實現在模態子視窗中傳值到父視窗，需要使用window.returnValue完成
實現方法如下：
在子視窗中：
//獲取父視窗某欄位值，對該值加一後返回父視窗
var parent=window.dialogArguments;
var x=parent.docuement.getElementById("age").value;
x=x+1；
//傳回x值
window.returnValue=x;
在父視窗中：
//獲取來自子視窗的值
var newWin=window.showModelDialog(url,window,'');
if(newWin!=null)
document.getElementById("age").value=newWin;
//在子視窗中設定父視窗的值
在子視窗中向父視窗中傳入值似乎沒有直接設定父視窗中的值來得明瞭。直接設定父視窗中元素的值顯得要更靈活一些,不過具體使用哪種方法要根據實際情況和已有的實現方式而定，因為如果使用了不切實際的方法不僅降低開發效率，也降低了執行效率，往往也會造成不優雅的實現方式和程式碼風格。
子視窗設定父視窗的值使用方法如下：
子視窗中：
var parent=window.dialogArguments;
var x=parent.document.getElementById("age").value;
x=x+1；
//設定父視窗中age屬性值
parent.document.getElementById("age").value=x;
以上是我在專案中使用javascript解決子視窗問題時，收集及積累的一些方法和資料。我是使用建立模態視窗的方式來實現的（這主要與專案本身有關），不過其實不論是使用window.open()還是使用window.showModelDialog()進行傳參等操作時雖然在實現方法上有很大的差別，初次接觸會覺得有點亂，但只要理清子視窗與父視窗之間的關係和角色之後，就很好理解了。