Chrome不支持showModalDialog模態對話框和無法返回returnValue的問題

What?模態對話框失效了?

  上個禮拜修改測試一個后台管理項目，在測試與各個瀏覽器兼容性的時候，發現在chrome瀏覽器下showModalDialog方法顯示的並不是模態對話框，就像新打開一個頁面一樣，父窗口仍然可以隨意獲取焦點，並可以打開多個窗體，而且返回值returnValue也無法返回，一直是undefined。這么多問題很令人頭疼，下面就各個主流最新版的瀏覽器進行了一下測試。

瀏覽器	是否支持	狀態
IE9	○
Firefox13.0	○
safari5.1	○
chrome19.0	×	並不是模態對話框，而是open了一個新窗體
Opera12.0	×	什么也發生，連個窗體都不彈

 

Chrome到底打開的是什么

 因為打開的不是模態對話框，而是像open了一個新窗體一樣，那只要驗證一下子窗體window.opener是否為空就明白了。

<script type="text/javascript">
        alert(window.opener);
</script>

在chrome中，顯示的是一個[object window]對象，而IE則是undefined。現在知道原來chrome將showModalDialog當作window.open來處理了。也就是說我們完全可以用window.opener來操作chrome瀏覽器下子窗體。這里還發現個很有趣的現象，firefox中測試window.opener也並不為空，於是我又測試了下使用showModalDialog在子窗體中關於window.opener和window.dialogArguments在各個瀏覽器里的狀況，由於Opera瀏覽器連個窗體都不彈，下面測試就剔除它了。

說明下父窗體的showModalDialog的方法中arguments傳遞是window對象，下面是測試的結果：

瀏覽器	模態對話框	window.opener	window.dialogArguments	returnValue
IE9	○	undefined	[object Window]	○
Firefox13.0	○	[object Window]	[object Window]	○
safari5.1	○	[object Window]	[object Window]	○
chrome19.0	×	[object Window]	undefined	×

 以上是我測試的結果，各個瀏覽器所支持的程度還是不一樣的。還要說一下Firefox瀏覽器下，子窗體假如刷新的話window.dialogArguments照樣會丟失，變成undefined。以上結果中我們可以看出返回值returnValue就只有chrome瀏覽器返回的是undefined，其他瀏覽器都沒有問題。那該如何解決這個問題呢？

解決returnValue問題

  通過以上的種種測試，我們已經知道chrome的showModalDialog方法很像執行了window.open方法，那么我們可以利用window.opener來實現window.returnValue的功能。

注意：temp=Math.random()這個隨機參數是為了解決緩存問題，不少朋友測試出undefined是因為是緩存的問題。 追加於2012-10-17

  父窗體部分js代碼：

window.onload = function () {
    var returnValue = window.showModalDialog("son.html?temp=" + Math.random(), window);
    //for chrome
    if (returnValue == undefined) {
        returnValue = window.returnValue;
    }

    alert(returnValue);
}

 

子窗體部分js代碼：

if (window.opener != undefined) {
       //for chrome
       window.opener.returnValue = "opener returnValue";
}
else {
       window.returnValue = "window returnValue";
}
window.close();

  這樣也在IE,FireFox,Chrome,Safari等瀏覽器下都可以通用了。 

最后

  最后有人要問那該如何實現模態對話框呢？我覺得應該是可以用一些js技巧去實現的，但是我不並推薦這樣做，我也查詢了很資料都不能很好的解決這個問題。當然，也可以有其他一些思路，比如為了不彈出更多的窗體，可以在點擊打開窗體的時候將那個open按鈕設置為不可用，只有關閉了子窗體再設置成可用。這些大家都可以自己去實踐下，或許有更好的方法。

  最后我想說的是在當今的網頁設計中很流行用div在頁面內去模擬一個窗體，樣式自定義,交互都很不錯，不一定非要用模態窗體，如何模擬網上一大把，今天就寫到這里吧，有什么錯誤的地方請大家多指正～～