最近在维护一个老项目,之前都是用IE来调试代码的。今天想着测试一下项目的兼容性,就用了谷歌浏览器,然后就遇到这样一个问题:一段用showModalDialog实现弹出模态框和返回值的js代码,在调试时报出了下面这个错误:

Uncaught TypeError: window.showModalDialog is not a function

  一开始怎么都想不通,明明以前都是可以正常打开的,为什么现在就不行了呢……然后一查才知道,原来是Chrome 把对showModalDialog的支持去掉了(太坑了。^!^……)。

浏览器异常:

1
Uncaught TypeError: undefined is not a function

如果出现这个异常,很不幸你已经躺枪了。关于这个问题可以看这里:

http://windowsitpro.com/blog/google-kills-showmodaldialog-api-chrome-37-and-does-evil-exchange-owa

http://www.infoq.com/news/2014/09/chrome-showmodaldialog

其中有些临时解决办法,但貌似showModalDialog不会回来了。

问题解决

常见的弹出窗口有div模拟或者用window.open代替,对于一个已经在用的系统来说,采用div方式转换成本较高,采用window.open改动会更少一些,但也会丢失其模态性。

这里采用简单的window.open方案,毕竟替换成本低很多。针对上文中提到的showModalDialog使用方式,替换为:

 
1
2
3
4
5
var iWidth = 500;
var iHeight = 300;
var iTop = (window.screen.availHeight - 30 - iHeight) / 2;
var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
var win = window.open("request.aspx", "弹出窗口", "width=" + iWidth + ", height=" + iHeight + ",top=" + iTop + ",left=" + iLeft + ",toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no,alwaysRaised=yes,depended=yes");

采用这种方式就可以打开一个和之前使用showModalDialog差不多的窗口。但是怎么返回值呢?

在弹出页面中有两种方式:

1、直接设置父窗口的DOM对象的值。

 
1
window.opener.document.getElementById(“parentWindowControlId”).value = "数据";

父窗口中应该有一个id为parentWindowControllId的DOM元素。

2、调用父窗口中的Javascript函数,由父窗口进行相应的处理。

 
1
2
3
4
5
var obj = {
id:"id",
name:"name"
};
window.opener.DoAfterXXX(obj);

父窗口提供一个DoAfterXXX的函数就可以了。

长远来看window.open由于其用户体验问题必将走向没落,大家还是尽快转移为好。

针对Chrome谷歌等浏览器不再支持showModalDialog的解决方案的更多相关文章

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

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

  2. GitHub不再支持密码验证解决方案:SSH免密与Token登录配置

    今天提交代码,push到GitHub上,突然出现这个问题. remote: Support for password authentication was removed on August 13, ...

  3. 高版本chrome不再支持window.showmodaldialog 的临时替换方案【用window.open】

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

  4. 中文版Chrome浏览器不支持12px以下字体的解决方案

    中文版Chrome浏览器不支持12px以下字体的解决方案 Chrome 27之前的中文版桌面浏览器会默认设定页面的最小字号是12px,英文版则没有限制,主要是因为chrome认为汉字小于12px就会增 ...

  5. 新版本火狐 ,Chrome不支持showModalDialog解决办法

    平常的网站中,有时我们会希望使用者按下按钮后开启一个保持在原窗口前方的子窗口,在IE中,我们可以使用showModalDialog来达成,但是chrome早就不支持showModalDialog,最近 ...

  6. Chrome不支持showModalDialog模态对话框和无法返回returnValue的问题

    父窗体部分js代码: var returnValue = window.showModalDialog("son.html ", window); //for chrome if ...

  7. 新Chrome浏览器不支持html5的问题

    window.applicationCache事件,最新chrome浏览器已经不能判断是否支持html5: 之前,在IE和Google中 为ApplicationCache对象,而在FF中为 Offl ...

  8. chrome从版本55开始,不再支持设置网页内容编码

    Hi Everyone,   Chrome 55 has removed the Encoding menu and Chrome will do auto-encoding detection no ...

  9. chrome 等浏览器不支持本地ajax请求的问题

    chrome 等浏览器不支持本地ajax请求的问题 XMLHttpRequest cannot load file:///D:/WWW/angularlx/ui-router-test/templat ...

随机推荐

  1. Codeforces 626C

                                                                                                        ...

  2. linux 操作系统/xxx目录下都是什么文件?

    /bin:存放最常用命令: /dev:设备文件: /etc:存放各种配置文件: /home:用户主目录: /lib:系统最基本的动态链接共享库: /mnt:一般是空的,用来临时挂载别的文件系统: /b ...

  3. c++(排序二叉树删除)

    相比较节点的添加,平衡二叉树的删除要复杂一些.因为在删除的过程中,你要考虑到不同的情况,针对每一种不同的情况,你要有针对性的反应和调整.所以在代码编写的过程中,我们可以一边写代码,一边写测试用例.编写 ...

  4. angular $cookies、$cookieStore

    js 文件 加载 <script src="angular-cookies/angular-cookies.js"></script>注入:angular. ...

  5. Java map 详解 - 用法、遍历、排序、常用API等

    尊重原创: http://www.cnblogs.com/lzq198754/p/5780165.html 概要: java.util 中的集合类包含 Java 中某些最常用的类.最常用的集合类是 L ...

  6. map的本质

    Map<String, String> map = new HashMap<String, String>(); map.put("1", "va ...

  7. Arrays类详解

    数组是数据结构中最简单的一种类型.在平常的使用上也比较多见.今天就来总结一下数组在使用过程中的一些心得 1.java中包装数组的一些基本用法的抽象类  java.util.Arrays.这个类中包含操 ...

  8. https和http有什么区别

    在URL前加https://前缀表明是用SSL加密的. 你的电脑与服务器之间收发的信息传输将更加安全. Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定. http和h ...

  9. Struts2 04--- 值栈 ognl(S标签)

           OGNL是Object-Graph Navigation Language的缩写,它是一种功能强大的表达式语言,通过它简单一致的表达式语法,可以存取对象的任意属性,调用对象的方法,遍历整 ...

  10. 阿里大鱼 阿里云api

    阿里短信服务API接入指南及示例  : https://yq.aliyun.com/articles/59928 =========================================== ...