`

Chrome不支持showModalDialog的解决方案

    博客分类:
  • JS
阅读更多
 
完全替代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调试的,而Chrome是不支持showModalDialog的,所以父窗口才没有收到子窗口的返回值的,在IE下就没有这个问题了。
 
后来在网上查了一下,原来在chrome下用showModalDialog打开的并不是模态窗口,而是和打开一个普通页面一样,父窗口还是可以获取焦点,执行相关操作。所以父窗口用var returnValue=window.showModalDialog(url[,vArguments][,sFeatures])接收子窗口的返回值时,这个returnValue总是undefined。

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

 

<scripttype="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,果然,有些时候,有些知识点,不自己写一下就是记不住啊!古语云“好记性不如烂笔头”,这话是不是要改成“好记性不如码字工”了,囧。。。。。
言归正传啊,这个问题只要在<head>内加入一下代码即可:

<basetarget="_self"/>

再啰嗦两句啊,其实这个base标签的target属性很早以前就所有了解,也大致知道每个属性值的含义,可是遇到问题就不知道这里用上这么简单的一句就好了,果然光看书是没有用的哇,贵在实践,实践,实在是贱-_-|||
 
其他还有什么缓存问题、Session丢失问题什么什么的,我都还没用过,写了也是记不住,就不写啦,哎,像我这种懒人,什么时候技术才能有所进步啊!!!
 
参考资料:
 
 
分享到:
评论

相关推荐

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

    在本文中,我们将探讨关于Chrome浏览器不支持`showModalDialog`模态对话框以及返回值`returnValue`无法正常工作的解决方案。`showModalDialog`方法在Web开发中常用于创建一个模态窗口,使得用户必须先关闭该对话框...

    google不支持window.showModalDialog问题解决方案

    This is a `window.showModalDialog()` shim using a modal HTML5 `&lt;dialog&gt;` element and ECMAScript 6 Generators. It was tested in the latest Google Chrome with the *Enable Experimental JavaScript* flag ...

    Chrome中模态对话框showModalDialog返回值问题的解决方法

    本文将深入探讨Chrome中`showModalDialog`返回值的问题及其解决方案。 首先,`showModalDialog`的基本用法如下: ```javascript var returnValue = window.showModalDialog(url, window, features); ``` 这里,`...

    谷歌showModalDialog()方法不兼容出现对话窗口的解决办法

    在给定的解决方案中,开发者通过检查用户代理字符串(`navigator.userAgent`)来判断当前浏览器是否为Chrome。如果用户代理包含"Chrome",则使用`window.open()`方法代替`showModalDialog()`来打开对话框,并设置相应...

    'window.ShowModalDialog'在Chrome中不起作用

    此外,利用条件注释或特性检测可以确保在不支持 `showModalDialog()` 的浏览器中优雅降级。 附带的文件 "window-ShowModalDialog-not-working-in-Chrome.pdf" 很可能包含更详细的分析、原因解释以及可能的解决方案...

    谷歌浏览器不支持showModalDialog模态对话框的解决方法

    在网页开发中,`showModalDialog` 是一个老式的JavaScript函数,它允许创建一个模态对话框,用户必须与该对话框交互后才能继续与主窗口进行交互。...来创建更灵活、可自定义且跨浏览器兼容的模态对话框解决方案。

    JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法

    本篇文章将深入探讨这个问题,并提供一种解决方案。 首先,我们来看一下问题的根源。在Chrome浏览器中,`showModalDialog`的返回值可能不正确是因为Chrome对`showModalDialog`的实现与其他浏览器不同。在其他浏览器...

    showModalDialog参数使用详解

    在JavaScript的世界里,`showModalDialog`是一个古老但仍然有用的函数,用于打开一个模态对话框,展示用户需要交互的...然而,考虑到其在某些现代浏览器中的支持问题,开发时应谨慎使用,并考虑使用更现代的解决方案。

    Window.ShowModalDialog使用手册

    然而,`Window.showModalDialog()`在现代浏览器中的支持并不一致,特别是在Chrome和Firefox中,出于安全和性能考虑,已经逐渐被弃用。开发者更倾向于使用`window.open()`配合`display: none`的CSS和JavaScript来模拟...

    针对window.showmodaldialog弹出窗体无刷新的详细使用

    同时,为未来可能的迁移计划,可以设计一个简单的接口,方便将来替换为其他模态对话框解决方案。 总的来说,`window.showModalDialog`是一个在特定情况下仍可使用的旧技术,理解其工作原理和限制可以帮助我们更好地...

    window.showModalDialog方法的使用

    例如,它不支持CSS3、HTML5的新特性,而且在某些浏览器(如Chrome和Firefox)中默认被禁用或行为有所改变。因此,在开发过程中,更推荐使用`window.open`配合`display: none`的CSS来实现类似的效果,或者使用现代...

    JS 弹出对话框window.showModalDialog()

    需要注意的是,`window.showModalDialog()` 是IE专有的API,在现代浏览器(如Chrome、Firefox等)中不支持。因此,在开发跨浏览器应用时,推荐使用更广泛的解决方案,如: - **HTML5 `&lt;dialog&gt;` 元素**: 提供了原生...

    showModalDialog在谷歌浏览器下会返回Null的解决方法

    请注意,由于 `showModalDialog` 在现代浏览器中的废弃和不推荐使用,开发者应该考虑使用更现代的替代方案,例如 HTML5 的 `dialog` 元素或使用库如 Bootstrap 的模态插件,它们提供了更好的跨浏览器兼容性和更多的...

    js showModalDialog弹出窗口实例详解

    JavaScript 的 `showModalDialog` 方法是用来创建一个模态对话框的,这种对话框在打开时会阻止用户与页面的其他部分交互,直到该...尽管如此,对于兼容旧版浏览器的应用,`showModalDialog` 仍然是一种有效的解决方案。

    showModalDi

    在本文中,我们将深入探讨“showModalDialog”方法在Chrome 37及更高版本中的问题,并提供解决方案,同时关注如何实现跨浏览器兼容性,特别是针对IE和Chrome。 “showModalDialog”是JavaScript的一个窗口对话框...

    关于struts2里用javascript刷新window.showModalDialog的父页面

    - **浏览器兼容性问题**:`window.showModalDialog`是IE特有方法,对于其他浏览器如Chrome、Firefox等不支持此方法,因此在实际开发中需要注意兼容性处理。 - **安全性考虑**:使用`window.showModalDialog`时需要...

    showModalDialog模态对话框的使用详解以及浏览器兼容

    `showModalDialog`是JavaScript中`window`对象的一个方法,用于打开一个模态对话框,即新打开的窗口会阻止用户与...但由于浏览器兼容性问题,现代Web开发中已不再推荐使用此方法,转而使用更灵活且跨浏览器的解决方案。

    javascript showModalDialog模态对话框使用说明

    Firefox浏览器不支持 showModalDialog 方法,它使用 window.open 方法来实现相似的功能,代码如下: ```javascript window.open('dialog.html', 'newWin', 'modal=yes,width=200,height=200,resizable=no,scrollbars...

Global site tag (gtag.js) - Google Analytics