問題重現
彈出窗口編碼：
|
0
1
2
3
4
5
6
7
|
var obj = new Object();
var retval = window.showModalDialog("request.aspx",obj,"dialogWidth=500px;dialogHeight=300px");
if (retval == null) {
...
}else {
...
}
|
瀏覽器異常：
|
0
1
|
Uncaught TypeError: undefined is not a function
|
如果出現這個異常，很不幸你已經躺槍了。關於這個問題可以看這里：
http://windowsitpro.com/blog/google-kills-showmodaldialog-api-chrome-37-and-does-evil-exchange-owa
http://www.infoq.com/news/2014/09/chrome-showmodaldialog
其中有些臨時解決辦法，但貌似showModalDialog不會回來了。
問題解決
常見的彈出窗口有div模擬或者用window.open代替，對於一個已經在用的系統來說，采用div方式轉換成本較高，采用window.open改動會更少一些，但也會丟失其模態性。
這里采用簡單的window.open方案，畢竟替換成本低很多。針對上文中提到的showModalDialog使用方式，替換為：
|
0
1
2
3
4
5
|
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");
|
采用這種方式就可以打開一個和之前使用showModalDialog差不多的窗口。但是怎么返回值呢？
在彈出頁面中有兩種方式：
1、直接設置父窗口的DOM對象的值。
|
0
1
|
window.opener.document.getElementById(“parentWindowControlId”).value = "數據";
|
父窗口中應該有一個id為parentWindowControllId的DOM元素。
2、調用父窗口中的Javascript函數，由父窗口進行相應的處理。
|
0
1
2
3
4
5
|
var obj = {
id:"id",
name:"name"
};
window.opener.DoAfterXXX(obj);
|
父窗口提供一個DoAfterXXX的函數就可以了。
長遠來看window.showModalDialog由於其用戶體驗問題必將走向沒落，大家還是盡快轉移為好。