針對Chrome谷歌等瀏覽器再也不支持showModalDialog的解決方案

　　最近在維護一個老項目，以前都是用IE來調試代碼的。今天想着測試一下項目的兼容性，就用了谷歌瀏覽器，而後就遇到這樣一個問題：一段用showModalDialog實現彈出模態框和返回值的js代碼，在調試時報出了下面這個錯誤：

Uncaught TypeError: window.showModalDialog is not a function

　　一開始怎麼都想不通，明明之前都是能夠正常打開的，爲何如今就不行了呢……而後一查才知道，原來是Chrome 把對showModalDialog的支持去掉了（太坑了。^!^……）。

瀏覽器異常：

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使用方式，替換爲：

 

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差很少的窗口。可是怎麼返回值呢？

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

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

 

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

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

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

 

1 2 3 4 5

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

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

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