【問題與解決】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差很少的窗口。可是怎麼返回值呢？

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

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

window.opener.document.getElementById(「parentWindowControlId」).value = "數據";

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

 

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

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

父窗口提供一個DoAfterXXX的函數就能夠了。

 

長遠來看window.open因爲其用戶體驗問題必將走向沒落，仍是儘快轉移爲好。