Chrome不支持showModalDialog模态对话框和无法返回returnValue的问题
- 作者:网页模板
- 类型:图文教程
- 点击次数:
- 发布时间:2014-04-11 11:50
在 chrome浏览器下showModalDialog方法显示的并不是模态对话框,就像新打开一个页面一样,父窗口仍然可以随意获取焦点,并可以打开多个 窗体,而且返回值returnValue也无法返回,一直是undefined。这么多问题很令人头疼,下面就各个主流最新版的浏览器进行了一下测试。
以上是我测试的结果,各个浏览器所支持的程度还是不一样的。还要说一下Firefox浏览器下,子窗体假如刷新的话,window.dialogArguments照样会丢失,变成undefined。以上结果中我们可以看出返回值returnValue就只有chrome浏览器返回的是undefined,其他浏览器都没有问题。那该如何解决这个问题呢?
父窗体部分js代码:
本文转载自:http://blog.csdn.net/tegwy/article/details/7735814
showModalDialog模态对话框详细使用方法:js showModalDialog模态对话框 (责任编辑:网页模板)
浏览器 | 是否支持 | 状态 |
IE9 | ○ | |
Firefox13.0 | ○ | |
safari5.1 | ○ | |
chrome19.0 | × | 并不是模态对话框,而是open了一个新窗体 |
Opera12.0 | × | 什么也发生,连个窗体都不弹 |
Chrome到底打开的是什么
因为打开的不是模态对话框,而是像open了一个新窗体一样,那只要验证一下子窗体window.opener是否为空就明白了。<script type="text/javascript"> alert(window.opener); </script>在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 | ○ | [objectWindow] | [object Window] | ○ |
safari5.1 | ○ | [objectWindow] | [object Window] | ○ |
chrome19.0 | × | [objectWindow] | undefined | × |
解决returnValue问题
通过以上的种种测试,我们已经知道chrome的showModalDialog方法很像执行了window.open方法,那么我们可以利用window.opener来实现window.returnValue的功能。父窗体部分js代码:
var returnValue = window.showModalDialog("son.html ", window); //for chrome if (returnValue == undefined) { returnValue = window.returnValue; }子窗体部分js代码:
if (window.opener != undefined) { //for chrome window.opener.returnValue = "opener returnValue"; } else { window.returnValue = "window returnValue"; } window.close();这样也在IE,FireFox,Chrome,Safari等浏览器下都可以通用了。
本文转载自:http://blog.csdn.net/tegwy/article/details/7735814
showModalDialog模态对话框详细使用方法:js showModalDialog模态对话框 (责任编辑:网页模板)
- 本文标签:
- Chrome showModalDialog,谷歌 模态对话框