showModalDialog模態對話框的使用詳解以及瀏覽器相容_javascript技巧

1.ModalDialog是什麼？
showModalDialog是jswindow物件的一個方法，和window.open一樣都是開啟一個新的頁面。
差異是：showModalDialog開啟子視窗後，父視窗就不能取得焦點了（也就是無法操作了）。
可以在子視窗中透過設定window.returnValue的值，讓父視窗可以取得這個returnvalue.

2.一個範例
1)主視窗main.html,
2)在主視窗中透過showModalDialog的方式開啟子視窗sub.html
3)在子視窗中設定returnValue回傳給主視窗使用

main.html

複製程式碼 程式碼如下:

<script><BR>functionshowmodal()<BR>{<BR>varret=window.showModalDialog(ModalDialog(ModalDialog "sub.html?temp=" Math.random());<BR>alert("subreturnvalueis" ret);<BR>}<BR></script>

sub.html

sub.html複製程式碼

程式碼如下:












<script><BR>functionreturnMain()<BR>{</script>

window.returnValue="returnfromsub";window.close();} 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

複製代碼代碼如下:

 
 
 
 
<script> <BR>function showmodal()<BR>{<BR>  var ret = window.showModalDialog("sub.html?temp=" Math.random(),window);<BR>  //for Chrome<BR>  if( ret==undefined)<BR>  {<BR>    ret = window.returnValue;<BR>  }<BR>  alert("sub return value is " ret);<BR>}<BR></script>
 
 
 

sub.html

複製程式碼 程式碼如下:

程式碼如下:


 
 
 
<script><BR>function returnMain()<BR>{< window.opener!=undefined)<BR>  {<BR>    window.opener.returnValue = "return from sub"; <BR>  }else{<BR>    windowreturnturnValue 🎜>  window.close();<BR>}<BR></script>
 
 
 

這裡是判斷某些物件是否為defined來區分瀏覽器。當然，也可以判斷瀏覽器的類型的方式進行
這裡是藉用了父視窗的returnValue來使用， 如果父視窗的returnValue也用其他用途是可以使用替換的方式進行了， as：

var oldValue  = window.returnValue;
var newValue = showModalDialog()
window.returnValue = oldValue 

6.要特別注意的是，Chrome下的測驗需要把html 檔案放入到web server(Tomcat,...)下透過http url 存取測試。否則就不成功了。