showModalDailog 兼容

需求

在很久很久以前的代码上,使用了showModalDailog来实现模态窗体。突然老大发现网站只在ie上好使了,就让排查问题,结果一看,除了ie,其他大佬好像都不支持这玩意了,满满的绝望,需求来了:在尽量不动源代码的基础上实现其他浏览器的兼容

解决方案

先搜索

Chrome浏览器showModalDialog兼容性及解决方案

ShowModalDialog Polyfill这个是搜了很久很久才在一篇不是太起眼的blog中发现的,博主也是搜了半天,后来FQ上了谷歌,才发现其实早就有人实现了这个兼容了。也是一番感叹。原谅我忘了博客地址了,只记得收藏方案了。

后来,用了第二种方式来实现兼容,在过程中也遇到了一些问题,主要的就是回调
因为项目太老 回调就只能用eval了
看一眼,相关代码,这就意味着 对原调用方法的书写就有一定要求,这个改了很久,这个就得具体情况具体分析了,不多说了、

相关代码:

//if using eval
        var isNext = false;
        var nextStmts = caller.split('\n').filter(function(stmt) {
            if(isNext || stmt.indexOf('showModalDialog(') >= 0)
                return isNext = true;
            return false;
        });
        dialog.addEventListener('close', function() {
            var returnValue = document.getElementById('dialog-body').contentWindow.returnValue;
            document.body.removeChild(dialog);
            nextStmts[0] = nextStmts[0].replace(/(window\.)?showModalDialog\(.*\)/g, JSON.stringify(returnValue));
            eval('{\n' + nextStmts.join('\n'));
});
posted @ 2018-03-14 22:14  waslm  阅读(311)  评论(0编辑  收藏  举报