showModalDialog模態對話框的使用詳解以及瀏覽器兼容

2019-11-20 21:16:27

字體：大中小

來源：轉載

供稿：網友

1.ModalDialog是什么？
showModalDialog是jswindow對象的一個方法，和window.open一樣都是打開一個新的頁面。
區別是：showModalDialog打開子窗口后，父窗口就不能獲取焦點了（也就是無法操作了）。
可以在子窗口中通過設置window.returnValue的值，讓父窗口可以獲取這個returnvalue.

2.一個例子
1)主窗口main.html,
2)在主窗口中通過showModalDialog的方式打開子窗口sub.html
3)在子窗口中設置returnValue返回給主窗口使用

main.html

復制代碼代碼如下:

<HTML>
<HEAD>
<METANAME="GENERATOR"Content="oscar999">
</HEAD>
<script>
functionshowmodal()
{
varret=window.showModalDialog("sub.html?temp="+Math.random());
alert("subreturnvalueis"+ret);
}
</script>
<BODY>
<INPUTid=button1type=buttonvalue="opensub"name=button1onclick="showmodal();">
</BODY>
</HTML>

sub.html

復制代碼代碼如下:

<HTML>
<HEAD>
<METANAME="GENERATOR"Content="oscar999">
</HEAD>
<script>
functionreturnMain()
{
window.returnValue="returnfromsub";
window.close();
}
</script>
<BODY>
<INPUTid=button1type=buttonvalue="returnandclose"name=button1onclick="returnMain()">
</BODY>
</HTML>

特別說明：在main.html中showModalDialog的方法時，有使用到Math.random()的目的是避免緩存。

3.showModalDialog詳細使用
vReturnValue=window.showModalDialog(sURL[,vArguments][,sFeatures])
sURL
必選參數，類型：字符串。用來指定對話框要顯示的文檔的URL。
vArguments
可選參數，類型：變體。用來向對話框傳遞參數。傳遞的參數類型不限，包括數組等。對話框通過window.dialogArguments來取得傳遞進來的參數。
sFeatures
可選參數，類型：字符串。用來描述對話框的外觀等信息，可以使用以下的一個或幾個，用分號“;”隔開。
dialogHeight對話框高度，不小于100px，ＩＥ４中dialogHeight和dialogWidth默認的單位是em，而ＩＥ５中是px，為方便其見，在定義modal方式的對話框時，用px做單位。
dialogWidth:對話框寬度。
dialogLeft:距離桌面左的距離。
dialogTop:離桌面上的距離。
center:{yes|no|1|0}：窗口是否居中，默認yes，但仍可以指定高度和寬度。
help:{yes|no|1|0}：是否顯示幫助按鈕，默認yes。
resizable:{yes|no|1|0}［ＩＥ５＋］：是否可被改變大小。默認no。
status:{yes|no|1|0}［IE5+］：是否顯示狀態欄。默認為yes[Modeless]或no[Modal]。
scroll:{yes|no|1|0|on|off}：指明對話框是否顯示滾動條。默認為yes。

還有幾個屬性是用在HTA中的，在一般的網頁中一般不使用。
dialogHide:{yes|no|1|0|on|off}：在打印或者打印預覽時對話框是否隱藏。默認為no。
edge:{sunken|raised}：指明對話框的邊框樣式。默認為raised。
unadorned:{yes|no|1|0|on|off}：默認為no。

4.瀏覽器兼容
但是并不是所有瀏覽器對兼容這樣的用法。
在Chrome中運行上面的例子的話，父窗口可以任意獲取焦點，效果和window.open一樣，而且獲取的returnVale也是undefined.
以下是各主流瀏覽器對此方法的支持狀況。

瀏覽器	是否支持	狀態
IE9	○
Firefox13.0	○
safari5.1	○
chrome19.0	×	并不是模態對話框，而是open了一個新窗體
Opera12.0	×	什么也發生，連個窗體都不彈

如果有傳入vArguments這個參數為window的話：

復制代碼代碼如下:

var ret = window.showModalDialog("sub.html?temp="+Math.random(),window);

則在子窗口中，以下的值為：

瀏覽器	模態對話框	window.opener	window.dialogArguments	returnValue
IE9	○	undefined	[object Window]	○
Firefox13.0	○	[objectWindow]	[object Window]	○
safari5.1	○	[objectWindow]	[object Window]	○
chrome19.0	×	[objectWindow]	undefined	×

注意一下Firefox瀏覽器下，子窗體假如刷新的話window.dialogArguments照樣會丟失，變成undefined。以上結果中我們可以看出返回值returnValue就只有chrome瀏覽器返回的是undefined，其他瀏覽器都沒有問題

5.如何解決Chrome的兼容問題。
方向是：設置window.opener.returnValue=""
main.html

復制代碼代碼如下:

<HTML>  
<HEAD>  
<META NAME="GENERATOR" Content="oscar999">  
</HEAD>  
<script>
function showmodal()
{
  var ret = window.showModalDialog("sub.html?temp="+Math.random(),window);
  //for Chrome
  if(ret==undefined)
  {
    ret = window.returnValue;
  }
  alert("sub return value is "+ret);
}
</script>
<BODY>  
<INPUT id=button1 type=button value="open sub" name=button1 onclick="showmodal();">  
</BODY>  
</HTML>

sub.html

復制代碼代碼如下:

<HTML>  
<HEAD>  
<META NAME="GENERATOR" Content="oscar999">  
</HEAD>  
<script>
function returnMain()
{
  if(window.opener!=undefined)
  {
    window.opener.returnValue = "return from sub"; 
  }else{
    window.returnValue = "return from sub";
  }
  window.close();
}
</script>
<BODY>  
<INPUT id=button1 type=button value="return and close" name=button1 onclick="returnMain()">  
</BODY>  
</HTML>

這里是判斷某些對象是否為defined來區分瀏覽器。當然，也可以判斷瀏覽器的類型的方式進行

這里是借用了父窗口的returnValue來使用，如果父窗口的returnValue也用其他用途是可以使用替換的方式進行了， as：
var oldValue = window.returnValue;
var newValue = showModalDialog()
window.returnValue = oldValue

6.需要特別注意的是，Chrome下的測試需要把html 文件放入到web server(Tomcat,...)下通過http url 訪問測試。否則就不成功了。

上一篇：利用javascript打開模態對話框(示例代碼)

下一篇：JS對話框_JS模態對話框showModalDialog用法總結