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'));
});