在chrome浏览器下showModalDialog方法兼容

admin 2014年11月22日 js和jquery学习 883次阅读 查看评论

  在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.openerwindow.dialogArgumentsreturnValue
IE9undefined[object Window]
Firefox13.0[objectWindow][object Window]
safari5.1[objectWindow][object Window]
chrome19.0×[objectWindow]undefined×

  以上是我测试的结果,各个浏览器所支持的程度还是不一样的。还要说一下Firefox浏览器下,子窗体假如刷新的话window.dialogArguments照样会丢失,变成undefined。以上结果中我们可以看出返回值returnValue就只有chrome浏览器返回的是undefined,其他浏览器都没有问题。那该如何解决这个问题呢?

  解决returnValue问题

  通过以上的种种测试,我们已经知道chrome的showModalDialog方法很像执行了window.open方法,那么我们可以利用window.opener来实现window.returnValue的功能。

  父窗体部分js代码:


  var returnValue = window.showModalDialog("son.html ", window);
  //for chrome
  if (returnValue == undefined) {
  returnValue = window.returnValue;
  }
  子窗体部分js代码:
  if (window.opener != undefined) {
  //for chrome
  window.opener.returnValue = "opener returnValue";
  }
  else {
  window.returnValue = "window returnValue";
  }
  window.close();

  这样也在IE,FireFox,Chrome,Safari等浏览器下都可以通用了。

« 上一篇 下一篇 » admin原创文章,转载请注明出处! 标签:htmlhtml5js

相关日志:

«   2020年11月   »
1
2345678
9101112131415
16171819202122
23242526272829
30
控制面板
您好,欢迎到访网站!
  [查看权限]
网站分类
文章归档
网站收藏
友情链接
图标汇集
  • 又拍云
  • 订阅ipvb的RSS 2.0聚合