Chrome不支持showModalDialog的解决方案

昨天在使用showModalDialog的时候，遇到如下问题：

如果子窗口被刷新过，那么父窗口就接受不到子窗口的返回值。

为了解决这个问题，哎，我纠结了好久，最后才发现不是代码的问题，而是多浏览器兼容问题，因为我是用Chrome调试的，而Chrome是不支持showModalDialog的，所以父窗口才没有收到子窗口的返回值的，在IE下就没有这个问题了。

后来在网上查了一下，原来在chrome下用showModalDialog打开的并不是模态窗口，而是和打开一个普通页面一样，父窗口还是可以获取焦点，执行相关操作。所以父窗口用var returnValue=window.showModalDialog(url[,vArguments][,sFeatures])接收子窗口的返回值时，这个returnValue总是undefined。

因为在chrome下，即使是用window.showmodalDialog()打开一个新窗口，那也还是和window.open()一样，我们可以在子窗口通过如下js脚本验证一下window.opener是否为空

<script type="text/javascript">alert(window.opener);
</script>

通过调试，可以发现，在chrome中，显示的是一个[object window]对象，而IE则是undefined。现在知道原来chrome将showModalDialog当作window.open来处理了。也就是说如果我们想在chrome下给父窗口返回值，不能直接用window.returnValue，而是应该用window.opener.returnValue。

所以，在用showModalDialog时，并且父窗口和子窗口之间存在传值时，如果想兼顾IE和chrome，可以做如下处理：

父窗口js脚本：

var returnValue = window.showModalDialog("son.html ", window,"dialogWidth:400px;dialogHeight:400px");
//for chrome
if (!returnValue) {returnValue = window.returnValue;
}

子窗口js脚本：


if (window.opener) {//for chromewindow.opener.returnValue = "opener returnValue";
}
else {window.returnValue = "window returnValue";
}
window.close();//关闭子窗口

PS：以上的代码环境是IE 8.0.7601.17514和Chrome 22.0.1229.95 m，其他浏览器也没有仔细去测试过，有兴趣的人可以自己测试测试，总结总结，俺这种半吊子菜鸟就是个小混混。。。

此外，顺便把showModalDialog的基本用法也写一写吧，都是网上的

一、基本使用

语法：returnValue=window.showModalDialog(sURL[,vArguments][,sFeatures])

参数说明：

sURL：子窗口的URL。

vArguments：父窗口想要传给子窗口的参数。（子窗口可以通过window.dialogArguments来获取该参数）

sFeatures：描述子窗口的外观信息等。

dialogHeight——子窗口的高度；

dialogWidth——子窗口的宽度；

dialogLeft——子窗口离屏幕左边的距离；

dialogTop——子窗口离屏幕上边的距离；

center——子窗口是否居中显示，默认yes，但仍可以指定高度和宽度（还可以指定dialogLeft和dialogTop了吗？）

help——是否显示帮助按钮，默认yes；

resizable——是否可以被改变大小，默认no；

status——是否显示状态栏，默认yes[Modeless]或者no[Modal]（不明白，没体会）

scroll——指明对话框是否显示滚动条，默认为yes

示例：

//打开一个宽高均400px，无状态栏无帮助不能调节大小且居中屏幕的窗口
var sUrl = 'page0.aspx';
window.showModalDialog(sUrl, window, "dialogWidth:400px;dialogHeight:400px;status:0;help:0;resizable:0;center:1;");

二、控制父窗口

定义模式窗口时，设定 window 为对话框参数，则在该窗口中，可通过window.dialogArguments来控制父窗口的一切元素。

示例：

var oParent = window.dialogArguments; //获取父窗口对象
oParent.location.reload(); //父窗口刷新，当然还可以做其他操作

三、传值

如最开始解决chrome不能接收子窗口返回值那个例子再好不过啦。

四、提交表单会打开新窗口的问题

哎，这个问题遇到过两次，两次都是问的Green，果然，有些时候，有些知识点，不自己写一下就是记不住啊！古语云“好记性不如烂笔头”，这话是不是要改成“好记性不如码字工”了，囧。。。。。

言归正传啊，这个问题只要在<head>内加入一下代码即可：

<base target="_self"/>

再啰嗦两句啊，其实这个base标签的target属性很早以前就所有了解，也大致知道每个属性值的含义，可是遇到问题就不知道这里用上这么简单的一句就好了，果然光看书是没有用的哇，贵在实践，实践，实在是贱-_-|||

其他还有什么缓存问题、Session丢失问题什么什么的，我都还没用过，写了也是记不住，就不写啦，哎，像我这种懒人，什么时候技术才能有所进步啊！！！

参考资料：

1、showModalDialog模式窗口的若干问题

2、window.open详解

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

Chrome不支持showModalDialog的解决方案相关推荐

chrome不支持embed标签解决方案
chrome不支持embed标签解决方案参考文章: (1)chrome不支持embed标签解决方案 (2)https://www.cnblogs.com/thiaoqueen/p/8074530.h ...
关于chrome等浏览器不支持showModalDialog的解决方案
目前,新版本的chrome和opera.Firefox等浏览器已经不支持showModalDialog方法. 如果是没有接收返回值的,可以直接将window.showModalDialog改为wind ...
Chrome中使用showModalDialog无法接收返回值,解决方案
原来在chrome下用showModalDialog打开的并不是模态窗口,而是和打开一个普通页面一样,父窗口还是可以获取焦点,执行相关操作.所以父窗口用var returnValue=window.s ...
移动端UC浏览器不支持Blob的解决方案
前言 uc浏览器不支持Blob的解决方案参考文章:http://www.haomou.net/2016/01/14/2016_android_blob/ 如果你使用canvas导出图片,并将图片存储 ...
高版本Chrome兼容window.showModalDialog办法
高版本Chrome兼容window.showModalDialog办法方式一:回调兼容方式: 由于showmodaldialog 不属于W3C标准,在新版本浏览器中不再受支持,我们需要使用wind ...
谷歌将停止对32位Linux系统Chrome浏览器支持
谷歌将停止对32位Linux系统chrome浏览器支持今天,谷歌宣布自2016年3月上旬开始将不再为部分GNU/Linux操作系统继续提供32位Chrome浏览器的DEB安装包.来自Chromium ...
Chrome 53 支持 Shadow DOM 等规范
上周发布的 Chrome 53 带来了一系列实验性规范的支持,如Shadow DOM,它为复杂网页的开发提供便利.同时,针对移动平台,Chrome 53也提供了PaymentRequest接口.自定义 ...
Chrome 53 支持Shadow DOM、PaymentRequest等规范
上周发布的 Chrome 53 带来了一系列实验性规范的支持,如Shadow DOM,它为复杂网页的开发提供便利.同时,针对移动平台,Chrome 53也提供了PaymentRequest接口.自定义 ...
Lingoes对Chrome的支持
之前还曾经苦苦查找使 Lingoes对Chrome的支持的办法,一个偶然的机会发现本来Lingoes就对Chrome的支持,但是得启动Lingoes的划词翻译功能.太好了. 转载于:https://w ...

Chrome不支持showModalDialog的解决方案

Chrome不支持showModalDialog的解决方案

Chrome不支持showModalDialog的解决方案相关推荐

最新文章

热门文章