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

最新推荐文章于 2023-01-27 23:50:45 发布

lufengsn

最新推荐文章于 2023-01-27 23:50:45 发布

阅读量3.8k

点赞数

分类专栏： Javascript 文章标签： chrome javascript html5

本文链接：https://blog.csdn.net/lufengsn/article/details/39934079

版权

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

摘要由CSDN通过智能技术生成

原理是利用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,