Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法


Posted in Javascript onOctober 30, 2016

What?模态对话框失效了?

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

浏览器 是否支持 状态
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 [object Window] [object Window]
safari5.1 [object Window] [object Window]
chrome19.0 × [object Window] undefined ×

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

解决returnValue问题

通过以上的种种测试,我们已经知道chrome的showModalDialog方法很像执行了window.open方法,那么我们可以利用window.opener来实现window.returnValue的功能。

注意:temp=Math.random()这个随机参数是为了解决缓存问题,不少朋友测试出undefined是因为是缓存的问题。 追加于2012-10-17

父窗体部分js代码:

window.onload = function () {
  var returnValue = window.showModalDialog("son.html?temp=" + Math.random(), window);
  //for chrome
  if (returnValue == undefined) {
    returnValue = window.returnValue;
  }

  alert(returnValue);
}

子窗体部分js代码:

if (window.opener != undefined) {
    //for chrome
    window.opener.returnValue = "opener returnValue";
}
else {
    window.returnValue = "window returnValue";
}
window.close();

这样也在IE,FireFox,Chrome,Safari等浏览器下都可以通用了。

最后

最后有人要问那该如何实现模态对话框呢?我觉得应该是可以用一些js技巧去实现的,但是我不并推荐这样做,我也查询了很资料都不能很好的解决这个问题。当然,也可以有其他一些思路,比如为了不弹出更多的窗体,可以在点击打开窗体的时候将那个open按钮设置为不可用,只有关闭了子窗体再设置成可用。这些大家都可以自己去实践下,或许有更好的方法。

最后我想说的是在当今的网页设计中很流行用div在页面内去模拟一个窗体,样式自定义,交互都很不错,不一定非要用模态窗体,如何模拟网上一大把,今天就写到这里吧,有什么错误的地方请大家多指正~~

Javascript 相关文章推荐
JavaScript的面向对象(一)
Nov 09 Javascript
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
JavaScript中Function详解
Feb 27 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
纯JS实现简单的日历
Jun 26 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
vue如何引入sass全局变量
Jun 28 Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 #Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 #Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 #Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 #Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 #Javascript
RequireJS简易绘图程序开发
Oct 28 #Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 #Javascript
You might like
php中simplexml_load_string使用实例分享
2014/02/13 PHP
PHP保存带BOM文件的方法
2015/02/12 PHP
php文件操作相关类实例
2015/06/18 PHP
PHP session 会话处理函数
2016/06/06 PHP
php常用正则函数实例小结
2016/12/29 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
python paramiko实现ssh远程访问的方法
2013/12/03 Python
python遍历数组的方法小结
2015/04/30 Python
python字典的常用方法总结
2019/07/31 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
Python 中如何写注释
2020/08/28 Python
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
求职自荐信格式
2013/12/04 职场文书
基层党员公开承诺书
2014/05/29 职场文书
中层干部考核评语
2015/01/04 职场文书
公积金贷款承诺书
2015/04/30 职场文书
员工辞职信范文大全
2015/05/12 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python