最近在维护一个老项目,之前都是用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. 蓝桥杯模拟赛-引爆炸弹-DFS+并查集

    今天整理电脑,翻出来了很久以前大佬给的题,贴一下. 引爆炸弹 1000ms 在一个 n×m的方格地图上,某些方格上放置着炸弹.手动引爆一个炸弹以后,炸弹会把炸弹所在的行和列上的所有炸弹引爆,被引爆的炸 ...

  2. HDU_5523Game

    Game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Total Sub ...

  3. Java简历与面试

    尊重原创:http://blog.csdn.net/love_java_cc/article/details/78292347 Java就业指导   想要成为合格的Java程序员或工程师到底需要具备哪 ...

  4. Linux中安装opencv-3.3.1

    在ubuntu16.04中安装opencv3.3.1的过程中踩了许多坑.一开始直接安装还挺顺利但运行程序时总是提示libgtk2.0-dev和pkg-config没有安装,在安装这两个包的过程中也不顺 ...

  5. 【ELK_Log4net】.net Core重写一个TcpAppender

    最近再搞ELK,三个工具部署完毕,想再继承上log4net.没想到.net core版Log4net竟然没有直接Tcp发送消息的appender.醉了.log4net 1.RemotingAppend ...

  6. 面试官最爱的volatile关键字

    在Java相关的岗位面试中,很多面试官都喜欢考察面试者对Java并发的了解程度,而以volatile关键字作为一个小的切入点,往往可以一问到底,把Java内存模型(JMM),Java并发编程的一些特性 ...

  7. 再叙Java反射

    Java中的反射 本文为反射的基础知识部分. 能够分析类能力的程序被称为反射(reflective). 反射机制允许程序在运行时取得任何一个已知名称的class的内部信息,容许程序在运行时加载.探知. ...

  8. Effective Java 第三版——28. 列表优于数组

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

  9. EL表达式遍历Map集合

    <% Map<String,String> map2 = new HashMap(); map2.put("a","hello world") ...

  10. Docker部署Elasticsearch集群

    http://blog.sina.com.cn/s/blog_8ea8e9d50102wwik.html Docker部署Elasticsearch集群 参考文档: https://hub.docke ...