欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2016年10月30日 00:24:00   作者:快樂喬巴  
上個禮拜修改測試一個后臺管理項目,在測試與各個瀏覽器兼容性的時候,發(fā)現(xiàn)在chrome瀏覽器下showModalDialog方法顯示的并不是模態(tài)對話框,就像新打開一個頁面一樣,父窗口仍然可以隨意獲取焦點,并可以打開多個窗體,而且返回值returnValue也無法返回,一直是undefined

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

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

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

Chrome到底打開的是什么

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

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

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

說明下父窗體的showModalDialog的方法中arguments傳遞是window對象,下面是測試的結(jié)果:

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

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

解決returnValue問題

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

注意:temp=Math.random()這個隨機參數(shù)是為了解決緩存問題,不少朋友測試出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等瀏覽器下都可以通用了。

最后

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

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

相關(guān)文章

  • Bootstrap企業(yè)網(wǎng)站實戰(zhàn)項目4

    Bootstrap企業(yè)網(wǎng)站實戰(zhàn)項目4

    這篇文章主要為大家分享了Bootstrap企業(yè)網(wǎng)站實戰(zhàn)項目,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-10-10
  • 由淺入深講解Javascript繼承機制與simple-inheritance源碼分析

    由淺入深講解Javascript繼承機制與simple-inheritance源碼分析

    Javascript語言對繼承實現(xiàn)的并不好,需要工程師自己去實現(xiàn)一套完整的繼承機制。下面我們由淺入深的系統(tǒng)掌握使用javascript繼承的技巧,對javascript繼承相關(guān)知識感興趣的朋友一起看看吧
    2015-12-12
  • javascript實現(xiàn)貪吃蛇經(jīng)典游戲

    javascript實現(xiàn)貪吃蛇經(jīng)典游戲

    這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)貪吃蛇經(jīng)典游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-04-04
  • js數(shù)組去重常見的方法匯總(7種)

    js數(shù)組去重常見的方法匯總(7種)

    我們做項目的時候往往會需要把數(shù)組里面一些重復(fù)的項去掉,下面這篇文章主要給大家介紹了關(guān)于js數(shù)組去重常見的7種方法匯總,對每種方法都進(jìn)行了總結(jié),需要的朋友可以參考下
    2022-08-08
  • input的focus方法使用

    input的focus方法使用

    input有個focus方法,今天發(fā)現(xiàn)就在onblur事件里面起作用,onchang等事件中根本不起作用的
    2010-03-03
  • 基于Css3和JQuery實現(xiàn)打字機效果

    基于Css3和JQuery實現(xiàn)打字機效果

    最近做項目,有需求實現(xiàn)一個字符逐個出現(xiàn),類似于打字機效果,于是上網(wǎng)搜了相關(guān)資料,接下來,小編就給大家詳細(xì)介紹基于Css3和JQuery實現(xiàn)打字機效果,需要的朋友可以參考下
    2015-08-08
  • javascript中JSON.parse()與eval()解析json的區(qū)別

    javascript中JSON.parse()與eval()解析json的區(qū)別

    這篇文章主要介紹了javascript中JSON.parse()與eval()解析json的區(qū)別,詳細(xì)描述了json格式數(shù)據(jù)的操作技巧,并結(jié)合實例形式對比分析了使用JSON.parse()與eval()解析json的區(qū)別,需要的朋友可以參考下
    2016-05-05
  • JavaScript數(shù)組特性與實踐應(yīng)用深入詳解

    JavaScript數(shù)組特性與實踐應(yīng)用深入詳解

    這篇文章主要介紹了JavaScript數(shù)組特性與實踐應(yīng)用,較為深入而詳細(xì)的分析了javascript數(shù)組的功能、屬性、使用方法及操作注意事項,需要的朋友可以參考下
    2018-12-12
  • JS實現(xiàn)的計數(shù)排序與基數(shù)排序算法示例

    JS實現(xiàn)的計數(shù)排序與基數(shù)排序算法示例

    這篇文章主要介紹了JS實現(xiàn)的計數(shù)排序與基數(shù)排序算法,結(jié)合實例形式簡單分析了計數(shù)排序與基數(shù)排序的原理與JS實現(xiàn)技巧,需要的朋友可以參考下
    2017-12-12
  • js實現(xiàn)rem自動匹配計算font-size的示例

    js實現(xiàn)rem自動匹配計算font-size的示例

    本篇文章主要介紹了js實現(xiàn)rem自動匹配計算font-size的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-11

最新評論