当前位置:首页 > 软件开发学习 > js和jquery学习 > 正文内容

Chrome不支持showModalDialog的解决方案

admin6年前 (2014-11-20)js和jquery学习1912

  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 chromeif (!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>内加入一下代码即可:

<base target="_self"/>

  再啰嗦两句啊,其实这个base标签的target属性很早以前就所有了解,也大致知道每个属性值的含义,可是遇到问题就不知道这里用上这么简单的一句就好了,果然光看书是没有用的哇,贵在实践,实践,实在是贱-_-|||其他还有什么缓存问题、Session丢失问题什么什么的,我都还没用过,写了也是记不住,就不写啦,哎,像我这种懒人,什么时候技术才能有所进步啊!!!参考资料:1、showModalDialog模式窗口的若干问题 2、window.open详解3、Chrome不支持showModalDialog模态对话框和无法返回returnValue的问题

扫描二维码推送至手机访问。

版权声明:本文由学无止境-开拓创新-ipvb学习网发布,如需转载请注明出处。

分享给朋友:

相关文章

html页面每隔一段时间ajax加载提醒

//html页面每隔一段时间ajax加载提醒setInterval("ajaxGetNotify()", parseInt(120) * 1000);...

使用jquery模拟SELECT下拉框取值效果

jquery模拟SELECT下拉框取值效果说到模拟SELECT框,大家第一想到的就是使用javascript吧,其实是jquery也是可以做到的,下面有个不错的示例,感兴趣的朋友可以参考下jquery...

总结js弹窗6种弹窗方法(全)

注:js弹窗的常见形式,大家参考//关闭,父窗口弹出对话框,子窗口直接关闭this.Response.Write("<script language=javascript>win...

常用js跳转页面的方法

js跳转页面的方法window.history.go(-1);可保留填写的资料,验证码也保留 window.history.back(-1);可保留填写的资料,验证码换新的<span...

页面回到顶部的三种实现(锚标记,js)

本文介绍三款简单的返回页面顶部代码,可以使用简单的HTML锚标记,也可使用Javascript Scroll 函数动态返回,其它的还有悬浮脚本等有点复杂了,本文不再介绍,大家根据自己需要选择其中的一种...

js包含文字出现乱码的处理

如果在gbk编码的王业内,引用了utf-8的js代码,大家就会发现出现了乱码,怎么解决呢,只需要代码引用的时候加上 代码所使用的编码即可,红色部分 <script ty...