快捷導(dǎo)航

Chrome不支持showModalDialog模態(tài)對(duì)話框和無(wú)法返回returnValue問(wèn)題的解決方法

更新時(shí)間：2016年10月30日 00:24:00 作者：快樂(lè)喬巴

上個(gè)禮拜修改測(cè)試一個(gè)后臺(tái)管理項(xiàng)目，在測(cè)試與各個(gè)瀏覽器兼容性的時(shí)候，發(fā)現(xiàn)在chrome瀏覽器下showModalDialog方法顯示的并不是模態(tài)對(duì)話框，就像新打開(kāi)一個(gè)頁(yè)面一樣，父窗口仍然可以隨意獲取焦點(diǎn)，并可以打開(kāi)多個(gè)窗體，而且返回值returnValue也無(wú)法返回，一直是undefined

What?模態(tài)對(duì)話框失效了?

上個(gè)禮拜修改測(cè)試一個(gè)后臺(tái)管理項(xiàng)目，在測(cè)試與各個(gè)瀏覽器兼容性的時(shí)候，發(fā)現(xiàn)在chrome瀏覽器下showModalDialog方法顯示的并不是模態(tài)對(duì)話框，就像新打開(kāi)一個(gè)頁(yè)面一樣，父窗口仍然可以隨意獲取焦點(diǎn)，并可以打開(kāi)多個(gè)窗體，而且返回值returnValue也無(wú)法返回，一直是undefined。這么多問(wèn)題很令人頭疼，下面就各個(gè)主流最新版的瀏覽器進(jìn)行了一下測(cè)試。

瀏覽器	是否支持	狀態(tài)
IE9	○
Firefox13.0	○
safari5.1	○
chrome19.0	×	并不是模態(tài)對(duì)話框，而是open了一個(gè)新窗體
Opera12.0	×	什么也發(fā)生，連個(gè)窗體都不彈

Chrome到底打開(kāi)的是什么

因?yàn)榇蜷_(kāi)的不是模態(tài)對(duì)話框，而是像open了一個(gè)新窗體一樣，那只要驗(yàn)證一下子窗體window.opener是否為空就明白了。

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

在chrome中，顯示的是一個(gè)[object window]對(duì)象，而IE則是undefined。現(xiàn)在知道原來(lái)chrome將showModalDialog當(dāng)作window.open來(lái)處理了。也就是說(shuō)我們完全可以用window.opener來(lái)操作chrome瀏覽器下子窗體。這里還發(fā)現(xiàn)個(gè)很有趣的現(xiàn)象，firefox中測(cè)試window.opener也并不為空，于是我又測(cè)試了下使用showModalDialog在子窗體中關(guān)于window.opener和window.dialogArguments在各個(gè)瀏覽器里的狀況，由于Opera瀏覽器連個(gè)窗體都不彈，下面測(cè)試就剔除它了。

說(shuō)明下父窗體的showModalDialog的方法中arguments傳遞是window對(duì)象，下面是測(cè)試的結(jié)果：

瀏覽器	模態(tài)對(duì)話框	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	×

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

解決returnValue問(wèn)題

通過(guò)以上的種種測(cè)試，我們已經(jīng)知道chrome的showModalDialog方法很像執(zhí)行了window.open方法，那么我們可以利用window.opener來(lái)實(shí)現(xiàn)window.returnValue的功能。

注意：temp=Math.random()這個(gè)隨機(jī)參數(shù)是為了解決緩存問(wèn)題，不少朋友測(cè)試出undefined是因?yàn)槭蔷彺娴膯?wèn)題。追加于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等瀏覽器下都可以通用了。

最后

最后有人要問(wèn)那該如何實(shí)現(xiàn)模態(tài)對(duì)話框呢？我覺(jué)得應(yīng)該是可以用一些js技巧去實(shí)現(xiàn)的，但是我不并推薦這樣做，我也查詢了很資料都不能很好的解決這個(gè)問(wèn)題。當(dāng)然，也可以有其他一些思路，比如為了不彈出更多的窗體，可以在點(diǎn)擊打開(kāi)窗體的時(shí)候?qū)⒛莻€(gè)open按鈕設(shè)置為不可用，只有關(guān)閉了子窗體再設(shè)置成可用。這些大家都可以自己去實(shí)踐下，或許有更好的方法。

最后我想說(shuō)的是在當(dāng)今的網(wǎng)頁(yè)設(shè)計(jì)中很流行用div在頁(yè)面內(nèi)去模擬一個(gè)窗體，樣式自定義,交互都很不錯(cuò)，不一定非要用模態(tài)窗體，如何模擬網(wǎng)上一大把，今天就寫到這里吧，有什么錯(cuò)誤的地方請(qǐng)大家多指正～～

您可能感興趣的文章: