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

来源：互联网发布：印度不服中国知乎编辑：程序博客网时间：2024/06/05 20:18

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

window.postMessage详情请查看：https://developer.mozilla.org/zh-CN/docs/Web/API/Window.postMessage

首先是自己写的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.width - width) / 2;        var top = (window.screen.height - 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() {            d.callback(event.data);        }        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);}

0 0