[Javascript] window.open 和 window.showModalDialog 的比較

在網站中，最常被用來做開新視窗的，大概就是 window.open 和 window.showModalDialog 了，優缺點差不多相反，至於使用時機，就看開發的需求了~

window.showModalDialog

優點：
新開啟的視窗會取得focus，直到該視窗關閉後才歸還給父視窗。適用於彈出另一個視窗強迫使用者檢視、選擇或輸入後再返回的時候。

缺點：
新開啟的視窗不能使用右鍵、不能選取、不能切換輸入法、不能重新整理。

父視窗的用法：

//URL建議加個亂數參數, 避免抓到cache住的舊資料, 這邊是用Date()當亂數
//returnValue是接子視窗回傳的值
returnValue = window.showModalDialog(encodeURI('TestForm.aspx?sDate=' + (new Date())), window, 'dialogWidth:800px; dialogHeight:600px; center:yes; help:no; resizable:no; status:no;');

//判斷子視窗回傳的值, 以做後續動作
if (returnValue == 'Success'){
 // Do some success things.
}
else{
 // Do some fail things.
}

子視窗的用法：

//取得父視窗的元件
var parentWindow = window.dialogArguments;
var sUser = parentWindow.$("input[id*='txtUser']").val();

//將值放入父視窗元件裡
parentWindow.$("input[id*='txtTel']").val('28825252');

//回傳訊息, 並關閉視窗
window.returnValue='Success'; 
window.close();

window.open

優缺點大概就跟ModalDialog相反吧。

父視窗的用法：

//URL建議加個亂數參數, 避免抓到cache住的舊資料, 這邊是用Date()當亂數
window.open(encodeURI('TestForm.aspx?sDate=' + (new Date())), 'popupWindow', 'height=600, width=800, top=0, left=0, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, status=no');

子視窗的用法：

//將值放入父視窗元件裡, 並關閉視窗
opener.document.form1.父視窗中的TextBox.value = '回傳的值';
window.close();

window.open比較不好處理的地方，在於如何控制父視窗的動作。

假設單純只是將父視窗整個做重新整理：

opener.location.reload();

如果只是想重新Bind部份資料，例如GridView：
先在父視窗做好Bind資料的Button事件

//JS事件, 執行btnBindData的PostBack Event, 提供給子視窗呼叫用的
function pBindData() {
    __doPostBack("btnBindData", "");
}
...
//Button元件

...

而在子視窗就能直接呼叫父視窗定義好的JS Event，來達到如同執行了btnBindData的效果

parent.pBindData();