IE vs. FireFox 系列 - showModalDialog
在網頁程式中,
有時我們會希望使用者按下按鈕後開啟一個保持在原視窗前方的子視窗,
而在IE中,我們可以使用showModalDialog來達成,
語法如下 :
vReturnValue = window .showModalDialog( sURL [ , vArguments ] [ , sFeatures ] )
範例:
window.showModalDialog("openwin.html","Arguments","dialogHeight: 200px; dialogWidth: 200px; dialogTop: 10px; dialogLeft: 10px; edge: Raised; center: Yes; help: Yes; resizable: Yes; status: Yes;");
但是.在Firefox中卻沒有showModalDialog這東西,
而在FireFox中我們只能使用window.open實現這樣的功能,
window.open的語法如下 :
oNewWindow = window .open( [ sURL ] [ , sName ] [ , sFeatures ] [ , bReplace ] )
只是,在Firefox下,window.open的參數中,sFeature多了一些功能設定,
而在FireFox下要讓開啟的視窗跟IE的showModalDialog一樣的話,
只要在sFeatures中加個modal=yes就可以了,
範例如下:
window.open('openwin.html','newWin','modal=yes,width=200,height=200,resizable=no,scrollbars=no');
提到了子視窗,不得不提的就是子視窗跟母視窗間的交互操作,
因為我想很多人開啟對話視窗應該都是為了將操作完的結果丟回去給母視窗...
如果是用showModalDialog的話,
在子視窗中要存取母視窗的函數的話,
要注意兩個地方,
1.(母視窗中)開啟視窗:
window.showModalDialog("openwin.html",self,'modal=yes,width=775,height=700,resizable=no,scrollbars=no');
在第二個參數(vArguments),改成self.
2.(子視窗中)調用母視窗的函數:
window.dialogArguments.ShowMsg(obj.value);
ShowMsg為母視窗中的函數.
而使用window.open的話,
則是要注意一個地方,
1.(子視窗中)調用母視窗的函數:
window.opener.ShowMsg(obj.value);
使用window.opener去接母視窗的物件.
如此一來,只要再透過navigator.appName去判斷瀏覽器為何,
就可以寫一個IE與FireFox相容的函數...
下面是範例網頁及程式
Source Download
Demo Page
相關網址 :
showModalDialog Method
open Method
DOM:window.open
關閉popup視窗同時更新原本的視窗
