Chrome37+代替window.showModalDialog模态窗口方法

最新推荐文章于 2022-07-26 16:39:00 发布

原创最新推荐文章于 2022-07-26 16:39:00 发布 · 4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#chrome #javascript #html5

Javascript 专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了如何利用HTML5的window.open和window.postMessage方法来替代Chrome37及以上版本不再支持的window.showModalDialog模态窗口。通过在父级页面调用dialog.js并设置参数，可以打开子级页面。子级页面同样引用dialog.js并通过oDialog.sendMessage返回数据到父级页面。提供了一个详细的调用示例。

原理是利用HTML5中的window.open()和window.postMessage()

window.postMessage详情请查看：window.postMessage - Web API 接口参考 | MDN

首先是自己写的dialog.js

function Dialog() {
    var d = this.dialog = Dialog.prototype;
    
    d.Popup = null;

    //初始化
    d.init = function () {
        //執行頁面消息監聽事件
        if (!d.isModalDialog()) {
            d.addEventListener();
        }
    };

    /**
     * 後台系統彈窗
     * @param {String}      url             窗口地址
     * @param {Int}         width           窗口寬度
     * @param {Int}         height          窗口高度
     * @param {Boolean}     bScroll         窗口是否允許滾動條
     * @param {Function}    evt[可選]       窗口返回數據回調函數
     */
    d.show = function (url, width, height, bScroll, evt) {
        d.DialogCompleteEventName = evt;
        
        var scroll = (bScroll == false) ? "no" : "yes";
        var left = (window.screen.availWidth - width) / 2;
        var top = (window.screen.availHeight - height) / 2;

        if (d.isModalDialog()) {
            var returnValue = window.showModalDialog(url, '', 'dialogWidth:' + width + 'px;dialogHeight:' + height + 'px;dialogLeft:' + left + 'px;dialogTop:' + top + 'px;status:yes;edge:Sunken;scroll:' + scroll + ';help:no;resizable:no;');
            if (returnValue == null) {
                returnValue = window.returnValue;
            }
            window.returnValue = null;
            d.callback(returnValue);
        } else {
            if (d.Popup != null) {
                d.Popup.close();
            }
                        
            d.Popup = window.open(url, '', 'height=' + height + ',width=' + width + ',top=' + top + ',left=' + left + ',directories=no,toolbar=no,menubar=no,copyhistory=no,scrollbars=' + scroll + ',resizable=no,location=no,status=yes');
            if (d.Popup != null) {
                d.Popup.focus();
                
                //发送消息
                setTimeout(function () {
                    d.Popup.postMessage("", "*");
                }, 600);
            }
        }
    };

    //子頁面處理完成后向父級頁面提交返回值
    d.sendMessage = function (returnValue) {
        if (!d.isModalDialog() && window.opener != null) {
            window.opener.postMessage(returnValue, "*");
        } else {
            window.returnValue = returnValue;
            if (window.opener != null) {
                window.opener.returnValue = returnValue;
            }
        }
        window.close();
    };
    //執行回調函數
    d.callback = function (returnValue) {
        if (typeof d.DialogCompleteEventName == "function") {
            d.DialogCompleteEventName(returnValue);
        }
    };

    //是否存在模态窗口
    d.isModalDialog = function () {
        if (typeof window.showModalDialog == "undefined") {
            return false;
        } else {
            return true;
        }
    };

    //定義頁面消息監聽事件
    d.addEventListener = function () {
        function onMessage(event) {
            setTimeout(function () {
                d.callback(event.data);
            }, 0);
        }
        if (typeof window.addEventListener != 'undefined') {
            window.addEventListener('message', onMessage, false);
        } else if (typeof window.attachEvent != 'undefined') {
            window.attachEvent('onmessage', onMessage);
        }
    };
    
    d.init();
}

var oDialog = new Dialog();

然后调用如下：

1、调用页面(父级页面)，引用dialog.js，调用函数弹窗：oDialog.show(url, width, height, bScroll, evt);
url：窗口地址，必填
width：窗口寬度，必填
height：窗口高度，必填
bScroll：窗口返回數據回調函數，必填
evt：窗口返回數據回調函數，可选
2、彈窗頁面(子级页面)，引用dialog.js，调用函数返回数据：oDialog.sendMessage(returnValue);
returnValue: 彈窗要返回的數據

示例：

index.aspx調用頁面(父级页面)

function selectItems() {
    var url = "../products/sys_select_items.aspx?ids="+ document.getElementById("hidd_ids").value;
    oDialog.show(url, 720, 800, true, selectItemsCallBack);
}

function selectItemsCallBack(returnValue) {
    if (returnValue != null) {
        //做數據操作
    }
}

sys_select_items.aspx彈窗頁面(子级页面)

//確定按鈕
function btnSubmit_onclick() {
    var returnValue = "Y";
    oDialog.sendMessage(returnValue);
}