萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> showModalDialog模態對話框的使用詳解以及浏覽器兼容

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

showModalDialog是jswindow對象的一個方法,和window.open一樣都是打開一個新的頁面。區別是:showModalDialog打開子窗口後,父窗口就不能獲取焦點了(也就是無法操作了)

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,IE4中dialogHeight和dialogWidth默認的單位是em,而IE5中是px,為方便其見,在定義modal方式的對話框時,用px做單位。

dialogWidth:對話框寬度。

dialogLeft:距離桌面左的距離。

dialogTop:離桌面上的距離。

center:{yes|no|1|0}:窗口是否居中,默認yes,但仍可以指定高度和寬度。

help:{yes|no|1|0}:是否顯示幫助按鈕,默認yes。

resizable:{yes|no|1|0}[IE5+]:是否可被改變大小。默認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 訪問測試。否則就不成功了。

copyright © 萬盛學電腦網 all rights reserved