接管别人的项目,因开发时用了showmodaldialog 导致最近很多用户chrome升级到最新之后 就无法弹窗了。原因是新版chrome[37+]不再支持showmodaldialog。

showmodaldialog 并不是W3C标准内的方法,起源于IE, 当是低版本的firefox也是不支持的,后来不知怎么了又纳入了这个方法。貌似opera和safari都不支持。随着web标准的日益规范化,估计Firefox 和 IE都不会再支持它了。所以建议经常使用它做数据交互的同学可以抛弃它了,改用js和div封装的弹窗组件吧。

下面我贴出我解决此问题的方法。

因为我这个项目是嵌套很多iframe的。弹窗口会有数据回传。弹窗之上又有弹窗也会有值回传。3级或者更多。所以我把兼容的js代码写在一个文件,所有涉及弹窗口的页面均调用这个脚本文件:

common.js

  1. var has_showModalDialog = !!window.showModalDialog;//定义一个全局变量判定是否有原生showModalDialog方法
  2. if(!has_showModalDialog &&!!(window.opener)){
  3. window.onbeforeunload=function(){
  4. window.opener.hasOpenWindow = false;        //弹窗关闭时告诉opener:它子窗口已经关闭
  5. }
  6. }
  7. //定义window.showModalDialog如果它不存在
  8. if(window.showModalDialog == undefined){
  9. window.showModalDialog = function(url,mixedVar,features){
  10. if(window.hasOpenWindow){
  11. alert("您已经打开了一个窗口!请先处理它");//避免多次点击会弹出多个窗口
  12. window.myNewWindow.focus();
  13. }
  14. window.hasOpenWindow = true;
  15. if(mixedVar) var mixedVar = mixedVar;
  16. //因window.showmodaldialog 与 window.open 参数不一样,所以封装的时候用正则去格式化一下参数
  17. if(features) var features = features.replace(/(dialog)|(px)/ig,"").replace(/;/g,',').replace(/\:/g,"=");
  18. //window.open("Sample.htm",null,"height=200,width=400,status=yes,toolbar=no,menubar=no");
  19. //window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
  20. var left = (window.screen.width - parseInt(features.match(/width[\s]*=[\s]*([\d]+)/i)[1]))/2;
  21. var top = (window.screen.height - parseInt(features.match(/height[\s]*=[\s]*([\d]+)/i)[1]))/2;
  22. window.myNewWindow = window.open(url,"_blank",features);
  23. }
  24. }

执行弹出的当前页的方法用例:(有返回值)

  1. function selectHotel(){
  2. url = 'hotel/listHotelForChoose.action';
  3. var hotelIdList = window.showModalDialog(url, "hotel", "dialogWidth:1020px;dialogHeight:500px;help:no;resizable:no;center:yes;scroll:yes;status:no");
  4. if(!has_showModalDialog) return;//chrome 返回 因为showModalDialog是阻塞的 open不一样;
  5. $("#content").append(hotelIdList);
  6. }
  7. function selectHotelChrome(option){//为打开的窗口定义方法,让打开的窗口关闭时通过window.opener赋值回来并执行
  8. $("#content").append(option);
  9. }

子窗口这样调用:

  1. function chooseHotels() {
  2. /*
  3. *省略了自己的业务.......
  4. */
  5. if (window.opener != undefined) { //forchrome
  6. window.opener.selectHotelChrome(contentIds); //关闭前调用父窗口方法
  7. }
  8. else {
  9. window.returnValue = contentIds;
  10. }
  11. window.close();
  12. }

高版本chrome不再支持window.showmodaldialog 的临时替换方案【用window.open】的更多相关文章

  1. 高版本Chrome不支持showModalDialog

    高版本Chrome不支持window.showModalDialog,可用window.open代替 var url = "https://www.baidu.com"; var ...

  2. 谷歌浏览器Chrome不再支持showModalDialog的解决办法

    问题重现 弹出窗口编码: JavaScript 0 1 2 3 4 5 6 7   var obj = new Object();   var retval = window.showModalDia ...

  3. NodeJS较高版本对connect支持的问题

    在nodejs中引入connect后,构建应用的代码如下 var connect = require('connect'); var server = connect.createServer(); ...

  4. jQuery2.0.0版本以后不再支持ie8的原因

    在引用jQuery时,引用高版本的Jq会在IE8下报错,在网上查了一下,jq在2.0+的版本就已经放弃对ie8的支持了.之前没有仔细研究过jq版本,借此机会去看了一下jq版本的知识.一.如何查看jq的 ...

  5. idea maven package报错"不再支持源选项 5 请使用 6 或更高版本。不支持发行版本 5"

    解决办法: 1.确保java compile以及project和module的java字节码版本是所用的java版本:

  6. 解决jquery mobile的遇到高版本Chrome一直转圈,页面加载不出来的情况。

    把这么一段代码,加到jquery.mobile.js中后问题解决了. $(document).on('mobileinit',function(){ $.mobile.changePage.defau ...

  7. ie高版本浏览器不支持velocity的问题解决

    <head><meta http-equiv="X-UA-Compatible" content="IE=5"></head> ...

  8. window.showModalDialog与window.open()使用

    window.showModalDialog 有些浏览器不兼容,尝试用window.open() 封装替代,需要打开子窗口后向父窗口传递数据. <html> <script src= ...

  9. 在Chrome、Firefox等高版本浏览器中实现低延迟播放海康、大华RTSP

    一.背景 现在到处是摄像头的时代,随着带宽的不断提速和智能手机的普及催生出火热的网络直播行业,新冠病毒的大流行又使网络视频会议系统成为商务会议的必然选择,因此RTSP实时视频流播放及处理不再局限于安防 ...

随机推荐

  1. 2019.9.23JAVA课堂测试

    1.题目 使用递归方式判断某个字串是否是回文( palindrome ) “回文”是指正着读.反着读都一样的句子.比如“我是谁是我”使用递归算法检测回文的算法描述如下:A single or zero ...

  2. 用flask进行web开发

    经理管理一个餐厅,推出每天都有特色菜的营销模式.他想根据一周中的每一天有一种特色菜. 客人想知道当天的特色菜是什么.另外再添加一个介绍页面.bios路径下,显示餐厅主人,厨师,服务生的简介. pyth ...

  3. webpack前置知识2(JavaScript项目初始化)

    所有的JavaScript项目都是在终端输入npm init -y进行项目初始化,如果要自定义项目规则,去掉 -y 参数. vscode终端快捷键ctrl+` 初始化 运行上述命令后,项目内会新建一个 ...

  4. ECMA Script 6新特性之解构赋值

    1.基本概念用法 1.1解构赋值:ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值. var a = 1; var b = 2; var c = 3; /*上述赋值语句用解构赋值为*/ v ...

  5. Flutter工程目录

    1 目录结构 当使用flutter create myapp 创建纯flutter项目后,会自动生成初始化代码. 需要注意一下几个文件夹 2 资源 像图片.视频.文字等这些资源文件,在 Flutter ...

  6. ThreadLocal 源码分析

    线程局部变量 ThreadLocal 用于实现线程隔离和类间变量共享. 创建实例 /** * 当前 ThreadLocal 实例的哈希值 */ private final int threadLoca ...

  7. 初步理解JS的事件机制

    一.事件流(捕获,冒泡)   事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体顺序是怎样的呢?冒 ...

  8. robotframework之常用系统关键字

    常用系统关键字此处做些记录,后续根据实际应用陆续补充 1.变量声明 ${a} Set Variable hello 2.表单嵌套 Select Frame Xpath=//* [@] Unselect ...

  9. MinGW GCC 9.1 2019年5月3日 出炉啦

    GNU 2019-05-03 发布了 GCC 9.1 https://gcc.gnu.org/onlinedocs/9.1.0/ 有详细的说明MinGW 上可用的 GCC 9.1 版本下载地址 [ m ...

  10. C 语言的运算符

    算术运算 C 语言支持 + - * / % 五种运算,加减乘除取模. 所有 CPU 都内建加法器,可以完成加法操作.减法操作可以转为加法操作.大部分 CPU 都没有内置乘法器,此时编译器会把 * / ...