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

将代码中原来的

window.showModalDialog

全部替换成：

showModalDialogN

然后增加方法：

    function showModalDialogN(uri, args, opts){
        if(!window.showModalDialog){
            showModalDialogN = 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;
            };
        }else{
            window.showModalDialog(uri, args, opts);
        }
    }

参考：

模态窗口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文档找到了温馨提示：

已废弃
该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。

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

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

/**
 * showModalDialog兼容处理
 * 该特性已从Web标准中删除
 * @author 范围兄 <ambit_tsai@qq.com>
 */
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;
    };
}