关于谷歌不兼容showModalDialog的解决方案

遇到的问题

window.showModalDialog()函数仅能应用于IE浏览器，属于IE浏览器的函数，若想应用于其他浏览器，只能使用window.open()进行替代,但是由于两者并非完全一致，可以说open()完全无法胜任替代showModalDialog()工作，最主要的就是showModalDialog()提供了一个子窗口与父窗口的一个传值交互的功能。所以最好的方式就是自己写一个showModalDialog()方法,让浏览器直接调我们自己写的showModalDialog()方法。

解决方案

下面直接上代码。
showModalDialog.js

(function() {window.spawn = window.spawn || function(gen) {function continuer(verb, arg) {var result;try {result = generator[verb](arg);} catch (err) {return Promise.reject(err);}if (result.done) {return result.value;} else {return Promise.resolve(result.value).then(onFulfilled, onRejected);}}var generator = gen();var onFulfilled = continuer.bind(continuer, 'next');var onRejected = continuer.bind(continuer, 'throw');return onFulfilled();};window.showModalDialog = window.showModalDialog || function(url, arg, opt) {url = url || ''; //URL of a dialogarg = arg || null; //arguments to a dialogopt = opt || 'dialogWidth:300px;dialogHeight:200px'; //options: dialogTop;dialogLeft;dialogWidth;dialogHeight or CSS stylesvar caller = arguments.callee.caller.toString();var dialog = document.body.appendChild(document.createElement('dialog'));dialog.setAttribute('style', opt.replace(/dialog/gi, ''));dialog.innerHTML = '<a href="#" id="dialog-close" style="position: absolute; top: 0; right: 5px; font-size: 20px; color: #000; text-decoration: none; outline: none;">&times;</a><iframe id="dialog-body" src="' + url + '" style="border: 0; width: 100%; height: 100%;"></iframe>';document.getElementById('dialog-body').contentWindow.dialogArguments = arg;document.getElementById('dialog-close').addEventListener('click', function(e) {e.preventDefault();dialog.close();});dialog.showModal();//if using yield or async/awaitif(caller.indexOf('yield') >= 0 || caller.indexOf('await') >= 0) {return new Promise(function(resolve, reject) {dialog.addEventListener('close', function() {var returnValue = document.getElementById('dialog-body').contentWindow.returnValue;document.body.removeChild(dialog);resolve(returnValue);});});}//if using evalvar 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'));});throw 'Execution stopped until showModalDialog is closed';};
})();

同时要注意window.dialogArguments与showModalDialog()属于关联方法，dialogArguments用于获取showModalDialog()打开的窗口的父窗口，所以dialogArguments也不被谷歌支持，需要调整一下

    var ua = navigator.userAgent;var ope = window.dialogArguments;//谷歌通过parent获取父窗口if (/chrome/i.test(ua)) {ope = window.parent;}

关于谷歌不兼容showModalDialog的解决方案相关推荐

Chrome不支持showModalDialog的解决方案
Chrome不支持showModalDialog的解决方案昨天在使用showModalDialog的时候,遇到如下问题: 如果子窗口被刷新过,那么父窗口就接受不到子窗口的返回值. 为了解决这个问题, ...
常见前端浏览器兼容问题及解决方案
常见前端浏览器兼容问题及解决方案所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站 ...
Web前端页面的浏览器兼容性测试心得（三）总结一些IE8兼容问题的解决方案
Web前端页面的浏览器兼容性测试心得(三)总结一些IE8兼容问题的解决方案参考文章: (1)Web前端页面的浏览器兼容性测试心得(三)总结一些IE8兼容问题的解决方案 (2)https://www. ...
php json json_unescaped_unicode,php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
PHP5.4才支持JSON_UNESCAPED_UNICODE这个参数,此参数是让中文字符在json_encode的时候不用转义,减少数据传输量.但在PHP5.3中,就得自己写个函数来实现,以下就是解 ...
常见的移动端兼容问题以及解决方案
常见的移动端兼容问题以及解决方案禁止ios识别长串数字为电话解决方法:添加 meta 属性 <meta content="telephone=no" name=" ...
关于pdfplumber和pdfminer不兼容的问题解决方案
关于pdfplumber和pdfminer不兼容的问题解决方案本人在实现有关pdf的读取任务当中,由于各类pdf文件的格式有所差异,因此使用了各种不同的pdf读取方式,但程序一直报错找不到特定的文件 ...
常见的浏览器兼容问题及解决方案
1 浏览器内核不同浏览器的内核也不尽相同,所以各个浏览器对网页的解析存在一定的差异. 常见的浏览器内核: 浏览器名称内核 IE Trident内核,也称IE内核 Chrome(谷歌) 以前是Web ...
内存双通道不兼容举例以及解决方案.
知乎上碰到两种不兼容的. ----------------------------------------------------------------------------------- 一种是 ...
运行虚拟机报错：vmware workstations与devicecredential不兼容（终极解决方案）
运行虚拟机报错:vmware workstations与devicecredential不兼容参考文献: 终极解决方案: https://jingyan.baidu.com/article/da10 ...
seata不兼容mysql8的解决方案
前言数据库:8.0.16版本. seata:0.9.0 问题启动seata之后,空指针异常之类的各种错误. 原因 seata不兼容8.x.x的数据库. 解决方案删除旧jar包,更换新jar包注 ...

关于谷歌不兼容showModalDialog的解决方案

遇到的问题

解决方案

关于谷歌不兼容showModalDialog的解决方案相关推荐

最新文章

热门文章