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

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