showModalDialog在谷歌浏览器下会返回Null的解决方法

What?模态对话框失效了?

showModalDialog的返回值在IE、火狐下面都能够获取返回值,但是在谷歌浏览器下面会返回Null,下面介绍解决方法

上个礼拜修改测试一个后台管理项目,在测试与各个浏览器兼容性的时候,发现在chrome浏览器下showModalDialog方法显示的并不是模态对话框,就像新打开一个页面一样,父窗口仍然可以随意获取焦点,并可以打开多个窗体,而且返回值returnValue也无法返回,一直是undefined。这么多问题很令人头疼,下面就各个主流最新版的浏览器进行了一下测试。

父页面:

浏览器 是否支持 状态
IE9
Firefox13.0
safari5.1
chrome19.0 × 并不是模态对话框,而是open了一个新窗体
Opera12.0 × 什么也发生,连个窗体都不弹

复制代码 代码如下:

Chrome到底打开的是什么

function openwindows(){
var obj = new Object();

因为打开的不是模态对话框,而是像open了一个新窗体一样,那只要验证一下子窗体window.opener是否为空就明白了。

//打开模态子窗体,并获取返回值
var retval = window.showModalDialog("ordervideo.jsp?rderIds=" "0010,0020,0030",obj,"dialogWidth=500px;dialogHeight=500px");

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

//for chrome
if(retval == undefined) {
retval = window.returnValue;
}
alert(retval);
}

在chrome中,显示的是一个[object window]对象,而IE则是undefined。现在知道原来chrome将showModalDialog当作window.open来处理了。也就是说我们完全可以用window.opener来操作chrome浏览器下子窗体。这里还发现个很有趣的现象,firefox中测试window.opener也并不为空,于是我又测试了下使用showModalDialog在子窗体中关于window.opener和window.dialogArguments在各个浏览器里的状况,由于Opera浏览器连个窗体都不弹,下面测试就剔除它了。

子页面:

说明下父窗体的showModalDialog的方法中arguments传递是window对象,下面是测试的结果:

复制代码 代码如下:

浏览器 模态对话框 window.opener window.dialogArguments returnValue
IE9 undefined [object Window]
Firefox13.0 [object Window] [object Window]
safari5.1 [object Window] [object Window]
chrome19.0 × [object Window] undefined ×

function onload(){

以上是我测试的结果,各个浏览器所支持的程度还是不一样的。还要说一下Firefox浏览器下,子窗体假如刷新的话window.dialogArguments照样会丢失,变成undefined。以上结果中我们可以看出返回值returnValue就只有chrome浏览器返回的是undefined,其他浏览器都没有问题。那该如何解决这个问题呢?

//for chrome
if(window.opener != undefined) { //window.opener的值在谷歌浏览器下面不为空,在IE/火狐下面是未定义,由此判断是否是谷歌浏览器
window.opener.returnValue = flag; //谷歌浏览器下给返回值赋值的方法window.opener.close(); //这里必须关闭一次,否则执行下面的window.close()无法关闭弹出窗口,因为谷歌浏览器下弹出窗口是个新的window
}

解决returnValue问题

else {
window.returnValue=flag; //这种赋值方法兼容IE/火狐,但不支持谷歌浏览器
}
window.close();

本文由必威官网登录发布于WEB前端,转载请注明出处:showModalDialog在谷歌浏览器下会返回Null的解决方法