在網頁程序中,
有時我們會希望使用者按下按鈕后開啟一個保持在原窗口前方的子窗口,
而在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兼容的函數...
例子如下：
在一個父窗口中打開一個子窗口，並把子窗口的值傳遞給父窗口
在父窗口中：
<script language="JavaScript">
function colorpick(obj){
if (window.showModalDialog!=null)//IE判斷
{
var smd= window.showModalDialog("Default2.aspx","","dialogWidth:225px;dialogHeight:170px;status:no;help:no;scrolling=no;scrollbars=no");
if(smd!=null)
obj.style.background=rtn;
return;
}
else
{
this.returnAction=function(strResult){
if(strResult!=null)
obj.style.background=strResult;
}
window.open("Default2.aspx","","width=225,height=170,menubar=no,toolbar=no,location=no,scrollbars=no,status=no,modal=yes");
return;
}
}
</script>
在子窗口中：
function act(RGB) {
if (window.showModalDialog!=null)//IE判斷
{
parent.window.returnValue="#"+RGB;
window.close();//firefox不支持
}
else
{
window.opener.returnAction("#"+RGB);
top.close();//IE和FireFox都支持
}
}