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中的this实例分析
Apr 28 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
js触发select onchange事件的小技巧
Aug 05 Javascript
JsRender for object语法简介
Oct 31 Javascript
浅谈javascript的分号的使用
May 12 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
基于iview的router常用控制方式
May 30 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 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数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
php连接mysql数据库
2017/03/21 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
python中的print()输出
2019/04/12 Python
python将视频转换为全字符视频
2019/04/26 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
node中使用shell脚本的方法步骤
2021/03/23 Javascript
化学学院毕业生自荐信范文
2013/12/17 职场文书
岗位职责怎么写
2014/03/14 职场文书
车间安全生产标语
2014/06/06 职场文书
java调用Restful接口的三种方法
2021/08/23 Java/Android
postgresql中如何执行sql文件
2023/05/08 PostgreSQL