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

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在页面内去模拟一个窗体，样式自定义,交互都很不错，不一定非要用模态窗体，如何模拟网上一大把，今天就写到这里吧，有什么错误的地方请大家多指正～～

赞 (0)

相关推荐

  • 谷歌showModalDialog()方法不兼容出现对话窗口的解决办法

    showModalDialog,在测试中,IE,Firefox中正常运行,但是在google中,点击后没什么反应,在网上看了一下,谷歌浏览器不支持showModalDialog模态对话框和无法返回returnValue,得到了一个解决办法 <script type="text/javascript"> //开启模式窗口 function showMyModal() { var url = "SelectUser.aspx"; //传入参数示例 var m

  • 谷歌浏览器不支持showModalDialog模态对话框的解决方法

    忽然发现Chrome浏览器版本 37.0.2062.103 m 不支持showModalDialog模态对话框和无法返回returnValue 项目原先用到的都不能正常执行 找了个折中方案利用window.open代替showModalDialog利用 window.opener.document来操作父页面的元素 复制代码 代码如下: window.open("xsp/exesp?todo=13","","height=500,width=280,sta

  • JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法

    本文实例讲述了JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法.分享给大家供大家参考,具体如下: 主页面: <script type="text/javascript"> function SelectGroupCust() { var temp = window.showModalDialog("Default2.aspx?xx=" + Date(), "", "dialog

  • window.dialogArguments 使用说明

    f1.php页面JS代码,第二个传的参数必须是self不能是别的 复制代码 代码如下: <script type="text/javascript"> function dianJi(){ //弹出窗口关闭前,原窗口不能获得焦点 //showModalDialog("f2.php",self,"dialogwidth=500px;dialogheight=500px;dialogtop=100px;dialogleft=100px;center

  • window.showModalDialog两次加载问题清除缓存方法

    今天遇到这样一件事情, 复制代码 代码如下: var frmHeight = 352; var frmWidth = 508; var frmTop = (window.screen.height - frmHeight) / 2; var frmLeft = (window.screen.width - frmWidth / 2); var url = "ChosePerson.aspx"; var parameter = "dialogHeight:" + fr

  • showModalDialog在谷歌浏览器下会返回Null的解决方法

    showModalDialog的返回值在IE.火狐下面都能够获取返回值,但是在谷歌浏览器下面会返回Null,下面介绍解决方法 父页面: 复制代码 代码如下: function openwindows(){ var obj = new Object(); //打开模态子窗体,并获取返回值 var retval = window.showModalDialog("ordervideo.jsp?rderIds="+"0010,0020,0030",obj,"di

  • Chrome中模态对话框showModalDialog返回值问题的解决方法

    没有找到太好的解决办法,暂时处理方法是,在弹出窗口中同时给 window.opener.ReturnValue 赋返回值.这样在关闭窗口后,通过下面的代码取得返回值: 复制代码 代码如下: var val = window.showModalDialog(...); if(!val) val= window.ReturnValue; 这样在IE.FF.及Chrome中,都可以得到返回值了.

  • showModalDialog模态对话框的使用详解以及浏览器兼容

    1.ModalDialog是什么?showModalDialog是jswindow对象的一个方法,和window.open一样都是打开一个新的页面.区别是:showModalDialog打开子窗口后,父窗口就不能获取焦点了(也就是无法操作了).可以在子窗口中通过设置window.returnValue的值,让父窗口可以获取这个returnvalue. 2.一个例子1)主窗口main.html,2)在主窗口中通过showModalDialog的方式打开子窗口sub.html3)在子窗口中设置ret

  • js模式化窗口问题![window.dialogArguments]

    前些天做项目时遇到了个浏览器兼容问题,解决后记录一下,也将模式化的资料放上! 详细问题描述: 在火狐浏览器中弹出一个子窗口,子页面中是一个分页,点下一页后子页面会刷新,然后window.dialogArguments对象就丢失了,alert输出显示undefined [解决方法见第三项] 最近做网站的时候需要用到模式化窗口功能,也遇到了一些问题,所以查了查资料以解决 1.弹出窗口几种方法: a.window.open(pageURL,name,parameters); b.window.show

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

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

  • javascript showModalDialog模态对话框使用说明

    javascript showModalDialog模态对话框使用说明

    1. 标准的方法 复制代码 代码如下: <script type="text/javascript"> function openWin(src, width, height, showScroll){ window.showModalDialog (src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeight:"+height+&

  • 重启IIS提示"不支持此接口"这个错误，无法正常重启的解决方法

    最近本机调试程序,重启IIS老提示"不支持此接口"这个错误,无法正常重启,日志里也没错误,我用的是win 2003 的系统,经过搜索(搜索引擎是个好东西)发现是360最新版,也就是7.0在痕迹清理中的注册表清理时,把注册表的某个键给删掉了, 出现了这个错误,现将注册表的内容发上来,供出现了同样错误的童鞋们修复用.将下面代码保存为 1.reg 文件,双击导入注册表即可: 复制代码 代码如下: Windows Registry Editor Version 5.00 [HKEY_CLASS

  • JavaScript 实现模态对话框 源代码大全

    首先,来说一下对话框: 对话框在Windows应用程序中使用非常普遍,许多应用程序的设定,与用户交互需要通过对话框来进行,因此对话框是Windows应用程序中最重要的界面元素之一,是与用户交互的重要手段.对话框是一个特殊的窗口,任何对窗口进行的操作(如移动.最大化.最小化等)也可以在对话框实施. 对话框大致可以分为以下两种: (1)模态对话框:模态对话框弹出后,独占了系统资源,用户只有在关闭该对话框后才可以继续执行,不能够在关闭对话框之前执行应用程序其他部分的代码.模态对话框一般要求用户做出某种

  • bootstrap模态框消失问题的解决方法

    bootstrap模态框消失问题的解决方法

    小编主要从网上整理了网友提出来的关于bootstrap模态框消失的不同问题,希望对大家有帮助. 状况一:bootstrap模态框瞬间消失解决 bootstrap模态框挺好,但这方面的例子很少,都是官方的代码,网上没有一点新的东西.比如,save changes,即点击确认后如何处理?没有例子.只有取消close的功能.我的需求是这样,点击一个链接,传一个id,打开模态框,进行输入.单选.列表选择等,点模态框确认,然后连同刚才的id.模态框中的各种值,一起提交到后台处理. 第一步:用链接传id并打

  • JS对话框_JS模态对话框showModalDialog用法总结

    父窗口: 复制代码 代码如下: <html><head><title>无标题页</title><script language="javascript" type="text/javascript">function opendialog1() { var someValue=window.showModalDialog("b.html","","dialo

随机推荐