问题重现

弹出窗口编码:

JavaScript
0
1
2
3
4
5
6
7
 
var obj = new Object();  
var retval = window.showModalDialog("request.aspx",obj,"dialogWidth=500px;dialogHeight=300px");
if (retval == null) {
...
}else {
...
}

浏览器异常:

Shell
0
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使用方式,替换为:

 
0
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对象的值。

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

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

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

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

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

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

转自波斯马 原文地址《谷歌浏览器Chrome不再支持showModalDialog的解决办法

谷歌浏览器Chrome不再支持showModalDialog的解决办法的更多相关文章

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

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

  2. Google浏览器Chrome安装失败,错误代码0xa0430721解决办法

    谷歌浏览器安装失败错误代码0xa0430721 的解决办法 这个是因为我们删除的时候没有删除干净.然后又重装了谷歌浏览器.所以就出现这个问题了. 1.删除旧的配置文件,比如C:\Documents a ...

  3. mac中matplotlib不支持中文的解决办法

    参考:https://blog.csdn.net/kaizei_pao/article/details/80795377 首先查看matplotlib已加载的字体: import matplotlib ...

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

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

  5. 针对Chrome谷歌等浏览器不再支持showModalDialog的解决方案

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

  6. chrome(谷歌)浏览器字体发虚解决办法

    chrome(谷歌浏览器)浏览网页时,字体发虚的解决办法: 1.点击chrome里的 “设置” - 外观 - 字体,改为 微软雅黑,该方法测试无效. 2.将系统字体的pingfang字体卸载,完美解决 ...

  7. 关于scrollbar-face-color只支持ie的解决办法!

    关于scrollbar-face-color只支持ie的解决方法!!今天突然有人问我滚动条css自定义的方法,我发现用scrollbar-base-color这种方法只有ie支持,查了半天资料总结如下 ...

  8. 高版本Chrome不支持showModalDialog

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

  9. chrome浏览器font-size<12px无效解决办法

    当样式设定font-size<12px时,chrome浏览器里字体显示仍为12px:如font-size:11px; 但是chrome还是12px的大小,很不听话. 今天我就遇到了这样的问题?网 ...

随机推荐

  1. Swift学习笔记十四

    Deinitialization 当类的实例对象即将要被释放时,会立即调用deinitializer,通过deinit关键字来定义deinitializer,和initializer一样,它也只存在于 ...

  2. PhoneGap+jQuery Mobile+Rest 访问远程数据

    最近研究Mobile Web技术.发现了一个好东西-PhoneGap! 发现用PhoneGap+jQuery Mobile是一个很完美的组合! 本实例通俗易懂.适合广大开发人群:高富帅.白富美.矮穷戳 ...

  3. 支付宝api指南

    tyle="margin:20px 0px 0px; line-height:26px; font-family:Arial"> 在这些服务中,服务类型大致可以分为以下几类: ...

  4. ssl/https双向验证的配置

    1.SSL认证 不需要特别配置,相关证书库生成看https认证中的相关部分 2.HTTPS认证 一.基本概念 1.单向认证,就是传输的数据加密过了,但是不会校验客户端的来源  2.双向认证,如果客户端 ...

  5. dsPIC33EP timer1 初始化设置及应用

    //文件 p33timer1.h #ifndef _P33TIMER1_H_ #define _P33TIMER1_H_ //#include "p33timer1.h" #def ...

  6. IT思想类智力题

    1. 台阶问题 题目:一个人上台阶可以一次上一个或两个,问这个人上n层的台阶,一共有多少种走法. 本题可以采用递归的方法来设计模型,先从数字的规律入手:假设共有i阶台阶,走完所有的台阶有n种走法,则存 ...

  7. IOS 视图切换动画

    我在网上找到的这个小方法,被我举一反三使用的屡试不爽.比如用在,当视图需要执行某一方法跳转到新的一个UIView上,从底层渐变浮到最上层.就是一个不错的视觉效果或者当需要类似keyboard的效果从底 ...

  8. ProcMon启用调试符

    1.设置 _NT_SYMBOL_PATH 如果在 _NT_SYMBOL_PATH 环境变量中提供了正确的?symsrv?语法,则常见的 Mircoroft 调试工具将使用 SymSrv 技术.这些工具 ...

  9. 【AsyncTask整理 2】 AsyncTask方法代码演示

    Android SDK为我们提供了一个后台任务的处理工具AsyncTask.AsyncTask就是一个封装过的后台任务类顾名思义就是异步任务,方便我们维护,Android开发网提示这样的好处可以解决一 ...

  10. No saved view state could be found for the view identifier

    解决方法: javax.faces.application.ViewExpiredException:No saved view state could be found for the view i ...