转：

模态窗口showModalDialog的浏览器兼容解决方案

2018-06-09 16:27:09 ambit_tsai-微信 阅读数 7321 收藏 更多

分类专栏： 前端日志

 

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/ambit_tsai/article/details/80633290

博主遇到一个项目，拿以前的项目来改的，它所用框架的版本官方已经停止维护很多年了，而且以前项目遗留的代码那是“一言难尽”啊。
用chrome调试的时候，点击一个按钮毫无反应，控制台提示showModalDialog不存在。网上查了下，在MDN Web文档找到了温馨提示：

• “改是不可能改的，这辈子不可能改的” — 窃·格瓦拉

在博主看来，这种老爷车还是不要大修的好，于是自己动手进行兼容，如下借助window.open对它的行为进行模拟。

/**
 * showModalDialog兼容处理
 * 该特性已从Web标准中删除
 * @author 范围兄 <[e-mail]>
 */
if(!window.showModalDialog){
    window.showModalDialog = function(uri, args, opts){
        opts = opts.replace(/:/g, '=')
            .replace(/;/g, ',')
            .replace('dialogWidth', 'width')
            .replace('dialogHeight', 'height')
            .replace('dialogtop', 'top')
            .replace('dialogleft', 'left')
            .replace('scroll', 'scrollbars');
        window.open(uri, '', opts).dialogArguments = args;
    };
}