Chrome瀏覽器showModalDialog兼容性及解決方案

chrome對showModalDialog方法是不兼容的，現在有年代久遠的項目，是用的window.showModalDialog方式打開模態窗口，但現在提出有兼容性問題。

對此，我的解決方案是通過window.open的方式來解決。

1.showModalDialog方法的執行是阻塞的，而open不是。

showModalDialog好比是同步的，而open是異步，想要解決此問題，可以在子窗口中調用父窗口的方法把返回值傳回去。

2.showModalDialog發打開的窗口是模態，而open不是。

沒有找到此問題的完美解決方案，我所想的是在父窗口定義一個常量hasOpenWindow，打開窗口時將其改為true，當期為true時，將焦點定位在剛才打開的窗口而不去新建，在父窗口的回掉函數中再將此常量改為false。

以下是chromeWindowShowModalDialog.js

/**
 * 打開方式對比：
 *     window.open("Sample.htm",null,"height=200,width=400,status=yes,toolbar=no,menubar=no");
 *     window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
 *     因window.showmodaldialog 與 window.open 參數不一樣，所以封裝的時候用正則去格式化一下參數
 * 
 * 定義一個全局變量<has_showModalDialog>判定是否有原生showModalDialog方法
 * 如果它不存在,自定義window.showModalDialog
 * 
 * if (window.opener != undefined && window.opener._doChromeWindowShowModalDialog) {
 *         window.opener.__doChromeWindowShowModalDialog(tmplInfo);//for chrome
 *     }else{
 *         window.returnValue = tmplInfo;
 *     }
 */
var has_showModalDialog = !!window.showModalDialog;
if(window.showModalDialog == undefined){
    window.showModalDialog = function(url,mixedVar,features){
        if(window.hasOpenWindow){
            window.myNewWindow.focus();
            return;
        }
        window.hasOpenWindow = true;
        if(mixedVar) var mixedVar = mixedVar;
        if(features) var features = features.replace(/(dialog)|(px)/ig,"").replace(/;/g,',').replace(/\:/g,"=");
        var left = (window.screen.width - parseInt(features.match(/width[\s]*=[\s]*([\d]+)/i)[1]))/2;
        var top = (window.screen.height - parseInt(features.match(/height[\s]*=[\s]*([\d]+)/i)[1]))/2;
        url = url + "&temp=" + Math.random();
        window.myNewWindow = window.open(url,"_blank",features);
    }
}
function _doChromeWindowShowModalDialog(obj){
    window.hasOpenWindow = false;
    try {
        doChromeWindowShowModalDialog(obj);
    }catch(e){
        
    }
}

 

 子窗口點擊確定或者關閉時：

if (window.opener != undefined && window.opener._doChromeWindowShowModalDialog) {
　　//for chrome
　　window.opener._doChromeWindowShowModalDialog(tmplInfo);
}

 

父窗口的回掉函數

function doChromeWindowShowModalDialog(obj){
    if(obj!=null){
    　　//TODO
    }
}