【問題與解決】showModalDialog is not defined 的解決方案

背景：

showModalDialog 是比較老的方法了，有些瀏覽器不再支持彈出模態窗口了。

比如說谷歌瀏覽就不再支持了，有文章說明如下：

Chrome’s Lack of Support for showModalDialog Breaks Some Enterprise Web Apps

 

彈出窗口代碼：

var obj = new Object();  
var retval = window.showModalDialog("request.aspx",obj,"dialogWidth=500px;dialogHeight=300px"); 
if (retval == null) {
...
}else {
...
}

瀏覽器報錯：

Uncaught TypeError: undefined is not a function

其中有些臨時解決辦法，但貌似showModalDialog不會回來了。

 

問題解決

常見的彈出窗口有div模擬或者用window.open代替，對於一個已經在用的系統來說，采用div方式轉換成本較高，采用window.open改動會更少一些，但也會丟失其模態性。

這里采用簡單的window.open方案，畢竟替換成本低很多。針對上文中提到的showModalDialog使用方式，替換為：

var iWidth = 500; 
var iHeight = 300; 
var iTop = (window.screen.availHeight - 30 - iHeight) / 2; 
var iLeft = (window.screen.availWidth - 10 - iWidth) / 2; 
var win = window.open("request.aspx", "彈出窗口", "width=" + iWidth + ", height=" + iHeight + ",top=" + iTop + ",left=" + iLeft + ",toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no,alwaysRaised=yes,depended=yes");

 

參數說明

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。

 

采用這種方式就可以打開一個和之前使用showModalDialog差不多的窗口。但是怎么返回值呢？

在彈出頁面中有兩種方式：

1、直接設置父窗口的DOM對象的值。

window.opener.document.getElementById(“parentWindowControlId”).value = "數據";

父窗口中應該有一個id為parentWindowControllId的DOM元素。

 

2、調用父窗口中的Javascript函數，由父窗口進行相應的處理。

var obj = { id:"id", name:"name" };  window.opener.DoAfterXXX(obj);

父窗口提供一個DoAfterXXX的函數就可以了。

 

長遠來看window.open由於其用戶體驗問題必將走向沒落，還是盡快轉移為好。