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生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
JavaScript操作XML文件之XML读取方法
Jun 09 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
Vue组件和Route的生命周期实例详解
Feb 10 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
原生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的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP实现的简单缓存类
2015/07/29 PHP
php自动载入类用法实例分析
2016/06/24 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
Smarty模板配置实例简析
2019/07/20 PHP
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
Python中的hypot()方法使用简介
2015/05/18 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
人力资源经理的岗位职责
2014/03/02 职场文书
面试必备的求职信
2014/05/25 职场文书
员工培训协议书
2014/09/15 职场文书
2014年度个人工作总结
2014/11/07 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
分家协议书范本
2016/03/22 职场文书
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript