1. 程式人生 > >谷歌,火狐瀏覽器不支援showModalDialog的解決方法

谷歌,火狐瀏覽器不支援showModalDialog的解決方法

首先得知道window.showModalDialog()方法到底是幹嘛的,有什麼作用.

基本介紹:
          showModalDialog()         (IE 4+ 支援)
          showModelessDialog()      (IE 5+ 支援)
          window.showModalDialog()                  方法用來建立一個顯示HTML內容的模態對話方塊。
          window.showModelessDialog()             方法用來建立一個顯示HTML內容的非模態對話方塊。
使用方法:


          vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
          vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
引數說明:
         sURL          --  必選引數,型別:字串。用來指定對話方塊要顯示的文件的URL。
         vArguments    -- 可選引數,型別:變體。用來向對話方塊傳遞引數。傳遞的引數型別不限,包括陣列等。對話方塊通過

                          window.dialogArguments來取得傳遞進來的引數。
         sFeatures     -- 可選引數,型別:字串。用來描述對話方塊的外觀等資訊,可以使用以下的一個或幾個,用分號“;”隔開。
----------------
1.    dialogHeight:    對話方塊高度,不小於100px
2.    dialogWidth:    對話方塊寬度。
3.    dialogLeft:     離螢幕左的距離。
4.    dialogTop:     離螢幕上的距離。
5.    center:          { yes | no | 1 | 0 } :              是否居中,預設yes,但仍可以指定高度和寬度。
6.    help:             {yes | no | 1 | 0 }:                是否顯示幫助按鈕,預設yes。
7.    resizable:       {yes | no | 1 | 0 } [IE5+]:     是否可被改變大小。預設no。
8.    status:          {yes | no | 1 | 0 } [IE5+]:      是否顯示狀態列。預設為yes[ Modeless]或no[Modal]。
9.    scroll:            { yes | no | 1 | 0 | on | off }:是否顯示滾動條。預設為yes。

以上內容來自於http://www.cnblogs.com/Dlonghow/archive/2009/06/04/1496141.html

然後發現在谷歌,火狐瀏覽器根本都彈不出來模態對話方塊,按F12開啟偵錯程式發現window.showModalDialog()在這兩個瀏覽器中是根本沒有定義的.

解決方法:

$(function(){
    if(window.showModalDialog == undefined){
        //alert("初始化的時候,判斷window.showModalDialog是否存在")
window.showModalDialog = function(url,mixedVar,features){
            window.hasOpenWindow = true;
if(mixedVar) var mixedVar = mixedVar;
if(features) var features = features.replace(/(dialog)|(px)/ig,"").replace(/;/g,',').replace(/\:/g,"=");
window.myNewWindow = window.open(url,"_blank",features);
}
    }
});
一載入頁面的時候,我們就判斷這個方法是否是undefined未定義的,如果是,我們給window.showModalDialog()重新賦予新的函式.

原來的寫法不變

var returnValue =window.showModalDialog(url,window,"dialogHeight:800px;dialogWidth:800px;center:yes");

子視窗的寫法

//選擇優惠券
function chooseCoupon(id) {
    var couponName =$('#'+id).val();
var val={id: id,name:couponName};if (window.opener != undefined) {
        //for chrome
window.opener.returnValue = val;
}
    else {
        window.returnValue = val;
}
    //呼叫父視窗方法
opener.fuzhi(val);
window.close();
}

然後遇到開啟子視窗的時候就給returnValue賦值,不統一.所以這邊換了opener.fuzhi()寫法,呼叫了父類fuzhi的函式,讓我們得到的返回值做剩下的業務操作.