DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Chrome不支持showModalDialog模態對話框和無法返回returnValue問題的解決方法
Chrome不支持showModalDialog模態對話框和無法返回returnValue問題的解決方法
編輯:關於JavaScript     

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在頁面內去模擬一個窗體,樣式自定義,交互都很不錯,不一定非要用模態窗體,如何模擬網上一大把,今天就寫到這裡吧,有什麼錯誤的地方請大家多指正~~

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved