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 相关文章推荐
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
style、 currentStyle、 runtimeStyle区别分析
Aug 01 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
利用node.js制作命令行工具方法教程(一)
Jun 22 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
angularjs模态框的使用代码实例
Dec 20 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 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实现异步操作的研究
2013/02/03 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
实例解析php的数据类型
2018/10/24 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
js返回上一页并刷新代码整理
2012/12/21 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
python实现猜单词小游戏
2020/05/22 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
小学德育工作经验交流材料
2014/05/22 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
2014年班主任工作总结
2014/11/08 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
人事专员岗位职责
2015/02/03 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers