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 相关文章推荐
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
jQuery hover 延时器实现代码
Mar 12 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
canvas绘制的直线动画
Jan 23 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 Javascript
JavaScript使用canvas绘制坐标和线
Apr 28 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模板类代码
2008/09/07 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
JavaScript的public、private和privileged模式
2009/12/28 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
2017/07/31 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
Python赋值语句后逗号的作用分析
2015/06/08 Python
Python文件读取的3种方法及路径转义
2015/06/21 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
幼儿园小班教学反思
2014/02/02 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
购房意向书
2014/08/30 职场文书
群众路线教育实践活动实施方案
2014/10/31 职场文书
行政助理岗位职责
2015/02/10 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
Docker部署Mysql8的实现步骤
2022/07/07 Servers