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

时间 2019-11-16

标签针对 chrome 谷歌浏览器再也不支持 showmodaldialog 解决方案栏目 Chrome 繁體版

原文原文链接

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

Uncaught TypeError: window.showModalDialog is not a functionwindows

　　一开始怎么都想不通，明明之前都是能够正常打开的，为何如今就不行了呢……而后一查才知道，原来是Chrome 把对showModalDialog的支持去掉了（太坑了。^!^……）。api

浏览器异常：浏览器

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-showmodaldialoggoogle

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

问题解决

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

这里采用简单的window.open方案，毕竟替换成本低不少。针对上文中提到的showModalDialog使用方式，替换为：code

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差很少的窗口。可是怎么返回值呢？

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

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

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

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

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

var obj = {

id:"id",

name:"name"

};

window.opener.DoAfterXXX(obj);

父窗口提供一个DoAfterXXX的函数就能够了。

长远来看window.open因为其用户体验问题必将走向没落，你们仍是尽快转移为好。