IT教程 | 加入收藏 | 简体 | 繁体
浏览器兼容:Html教程Css教程浏览器兼容手机HtmlBootstrap
当前位置: 首页 > Html+Css > 浏览器兼容

Chrome不支持showModalDialog()的解决方案

2014-10-24来源:[www.121ask.com]热度:0℃ 【字体:

Chrome不支持showModalDialog()的解决方案.

今天在使用showModalDialog的时候,遇到如下问题: 如果子窗口被刷新过,那么父窗口就接受不到子窗口的返回值。   为了解决这个问题,哎,我纠结了好久,最后才发现不是代码的问题,而是多浏览器兼容问题,因为我是用Chrome调试的,而Chrome是不支持showModalDialog的,所以父窗口才没有收到子窗口的返回值的,在IE下就没有这个问题了。   后来在网上查了一下,原来在chrome下用showModalDialog打开的并不是模态窗口,而是和打开一个普通页面一样,父窗口还是可以获取焦点,执行相关操作。所以父窗口用var returnValue=window.showModalDialog(url[,vArguments][,sFeatures])接收子窗口的返回值时,这个returnValue总是undefined。

因为在chrome下,即使是用window.showmodalDialog()打开一个新窗口,那也还是和window.open()一样,我们可以在子窗口通过如下js脚本验证一下window.opener是否为空

	

 

<script type="text/javascript">         alert(window.opener); </script>

 

通过调试,可以发现,在chrome中,显示的是一个[object window]对象,而IE则是undefined。现在知道原来chrome将showModalDialog当作window.open来处理了。也就是说如果我们想在chrome下给父窗口返回值,不能直接用window.returnValue,而是应该用window.opener.returnValue。   所以,在用showModalDialog时,并且父窗口和子窗口之间存在传值时,如果想兼顾IE和chrome,可以做如下处理: 父窗口js脚本:

	

 

var returnValue = window.showModalDialog("son.html ", window,"dialogWidth:400px;dialogHeight:400px"); //for chrome if (!returnValue) {     returnValue = window.returnValue; }

 

子窗口js脚本:

 


		

 

if (window.opener) {        //for chrome        window.opener.returnValue = "opener returnValue"; } else {        window.returnValue = "window returnValue"; } window.close();//关闭子窗口

 

       PS:以上的代码环境是IE 8.0.7601.17514和Chrome 22.0.1229.95 m,其他浏览器也没有仔细去测试过,有兴趣的人可以自己测试测试,总结总结,俺这种半吊子菜鸟就是个小混混。。。     此外,顺便把showModalDialog的基本用法也写一写吧,都是网上的 一、基本使用 语法:returnValue=window.showModalDialog(sURL[,vArguments][,sFeatures]) 参数说明: sURL:子窗口的URL。 vArguments:父窗口想要传给子窗口的参数。(子窗口可以通过window.dialogArguments来获取该参数) sFeatures:描述子窗口的外观信息等。   dialogHeight——子窗口的高度; dialogWidth——子窗口的宽度; dialogLeft——子窗口离屏幕左边的距离; dialogTop——子窗口离屏幕上边的距离; center——子窗口是否居中显示,默认yes,但仍可以指定高度和宽度(还可以指定dialogLeft和dialogTop了吗?) help——是否显示帮助按钮,默认yes; resizable——是否可以被改变大小,默认no; status——是否显示状态栏,默认yes[Modeless]或者no[Modal](不明白,没体会) scroll——指明对话框是否显示滚动条,默认为yes   示例:

			

 

//打开一个宽高均400px,无状态栏无帮助不能调节大小且居中屏幕的窗口  var sUrl = 'page0.aspx';   window.showModalDialog(sUrl, window, "dialogWidth:400px;dialogHeight:400px;status:0;help:0;resizable:0;center:1;");  

 

二、控制父窗口 定义模式窗口时,设定 window 为对话框参数,则在该窗口中,可通过window.dialogArguments来控制父窗口的一切元素。 示例:

		

 

var oParent = window.dialogArguments; //获取父窗口对象  oParent.location.reload(); //父窗口刷新,当然还可以做其他操作

 

三、传值 如最开始解决chrome不能接收子窗口返回值那个例子再好不过啦。   四、提交表单会打开新窗口的问题 哎,这个问题遇到过两次,两次都是问的Green,果然,有些时候,有些知识点,不自己写一下就是记不住啊!古语云“好记性不如烂笔头”,这话是不是要改成“好记性不如码字工”了,
以上IT文章《Chrome不支持showModalDialog()的解决方案 》由名客技术网[www.121ask.com]提供阅读!
推广信息
推广信息
名客技术网是一个免费为广大IT技术人员提供IT教程,绿色软件,asp/php/jsp/java/net等实例视频教程,CMS教程,破解软件下载以及学习相关源码、知识的IT网站。
名客技术网如果无意之中侵犯了您的版权,请来电告知,本站将在3个工作日内删除 QQ:175352796
Copyright 2011-2017 Powered by 121ASK.COM, All Rights Reserved.
备案号:鄂ICP备11013833号-3