完全替代showmodaldialog模态窗口的jQuery浮动窗口 http://download.csdn.net/download/mmnan/4294585
JS中showModalDialog 详细使用 -- http://blog.sina.com.cn/s/blog_49867dc001013jj4.html
模式窗口showModalDialog的用法总结 -- http://www.cnblogs.com/cosiray/archive/2009/08/22/1551942.html
Chrome不支持showModalDialog的解决方案
http://blog.163.com/zhi_qingfang@126/blog/static/11747756320132218144825/
2013-03-21 20:53:56| 分类: 学习笔记 | 标签:showmodaldialog 浏览器 |举报 |字号大中小 订阅
昨天在使用showModalDialog的时候,遇到如下问题:
通过调试,可以发现,在chrome中,显示的是一个[object window]对象,而IE则是undefined。现在知道原来chrome将showModalDialog当作window.open来处理了。也就是说如果我们想在chrome下给父窗口返回值,不能直接用window.returnValue,而是应该用window.opener.returnValue。
如果子窗口被刷新过,那么父窗口就接受不到子窗口的返回值。
为了解决这个问题,哎,我纠结了好久,最后才发现不是代码的问题,而是多浏览器兼容问题,因为我是用Chrome调试的,而Chrome是不支持showModalDialog的,所以父窗口才没有收到子窗口的返回值的,在IE下就没有这个问题了。
后来在网上查了一下,原来在chrome下用showModalDialog打开的并不是模态窗口,而是和打开一个普通页面一样,父窗口还是可以获取焦点,执行相关操作。所以父窗口用var returnValue=window.showModalDialog(url[,vArguments][,sFeatures])接收子窗口的返回值时,这个returnValue总是undefined。
因为在chrome下,即使是用window.showmodalDialog()打开一个新窗口,那也还是和window.open()一样,我们可以在子窗口通过如下js脚本验证一下window.opener是否为空
因为在chrome下,即使是用window.showmodalDialog()打开一个新窗口,那也还是和window.open()一样,我们可以在子窗口通过如下js脚本验证一下window.opener是否为空
<scripttype="text/javascript">
alert(window.opener);
</script>
所以,在用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,果然,有些时候,有些知识点,不自己写一下就是记不住啊!古语云“好记性不如烂笔头”,这话是不是要改成“好记性不如码字工”了,囧。。。。。
言归正传啊,这个问题只要在<head>内加入一下代码即可:
<basetarget="_self"/>
再啰嗦两句啊,其实这个base标签的target属性很早以前就所有了解,也大致知道每个属性值的含义,可是遇到问题就不知道这里用上这么简单的一句就好了,果然光看书是没有用的哇,贵在实践,实践,实在是贱-_-|||
其他还有什么缓存问题、Session丢失问题什么什么的,我都还没用过,写了也是记不住,就不写啦,哎,像我这种懒人,什么时候技术才能有所进步啊!!!
参考资料:
相关推荐
This is a `window.showModalDialog()` shim using a modal HTML5 `<dialog>` element and ECMAScript 6 Generators. It was tested in the latest Google Chrome with the *Enable Experimental JavaScript* flag ...
上个礼拜修改测试一个后台管理项目,在测试与各个浏览器兼容性的时候,发现在chrome浏览器下showModalDialog方法显示的并不是模态对话框,就像新打开一个页面一样,父窗口仍然可以随意获取焦点,并可以打开多个窗体...
javascript代码模块之如何使用showModalDialog
主要介绍了JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法,涉及javascript针对谷歌浏览器事件判定相关操作技巧,需要的朋友可以参考下
chrome中弹出模态对话框,通过window.returnValue赋返回值关闭后,有的情况下无法取得返回值。
网上自己找了很久,也没找到有用的方法。自己苦弄一天,终于解决。
忽然发现Chrome浏览器版本 37.0.2062.103 m 不支持showModalDialog模态对话框和无法返回returnValue 项目原先用到的都不能正常执行 找了个折中方案利用window.open代替showModalDialog利用 window.opener.document来...
解决三层或心上showModalDialog的问题_2
嗨,Kavita3,它是Chrome浏览器中的一个已知问题,您可以使用window.open();希望对您有用
解决showModalDialog 跨域 iframe
网上找了好几个小时没有找到解决办法。最终还是自己解决了。...这样做就是用超链接把返回url转递到用showModalDialog打开的新窗口中,当showModalDialog返回时指到转来的url,最终不刷新父窗口。......
给大家介绍了谷歌showModalDialog()方法不兼容出现对话窗口的解决办法,解决办法非常好,感兴趣的朋友可以参考下
使用window.showModalDialog的程序员都知道,该方法可返回值。但是如果遇到跨域时,就返回为underfine。本文档通过iframe镶嵌页面解决该问题。
解决三层或心上showModalDialog的问题_js
div层实现showModalDialog
showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。 window.showModelessDialog()方法用来创建一个显示HTML内容的非模态...
showModalDialog参数传递和获