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

  What?模态对话框失效了?

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

  浏览器

  是否支持

  状态

  IE9

  ○

  Firefox13.0

  ○

  safari5.1

  ○

  chrome19.0

  ×

  并不是模态对话框,而是open了一个新窗体

  Opera12.0

  ×

  什么也发生,连个窗体都不弹

  Chrome到底打开的是什么

  因为打开的不是模态对话框,而是像open了一个新窗体一样,那只要验证一下子窗体window.opener是否为空就明白了。

  

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

  您可能感兴趣的文章: