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


Posted in Javascript onJanuary 11, 2014

1.ModalDialog是什么?
showModalDialog是jswindow对象的一个方法,和window.open一样都是打开一个新的页面。
区别是:showModalDialog打开子窗口后,父窗口就不能获取焦点了(也就是无法操作了)。
可以在子窗口中通过设置window.returnValue的值,让父窗口可以获取这个returnvalue.

2.一个例子
1)主窗口main.html,
2)在主窗口中通过showModalDialog的方式打开子窗口sub.html
3)在子窗口中设置returnValue返回给主窗口使用

main.html

<HTML>
<HEAD>
<METANAME="GENERATOR"Content="oscar999">
</HEAD>
<script>
functionshowmodal()
{
varret=window.showModalDialog("sub.html?temp="+Math.random());
alert("subreturnvalueis"+ret);
}
</script>
<BODY>
<INPUTid=button1type=buttonvalue="opensub"name=button1onclick="showmodal();">
</BODY>
</HTML>

sub.html
<HTML>
<HEAD>
<METANAME="GENERATOR"Content="oscar999">
</HEAD>
<script>
functionreturnMain()
{
window.returnValue="returnfromsub";
window.close();
}
</script>
<BODY>
<INPUTid=button1type=buttonvalue="returnandclose"name=button1onclick="returnMain()">
</BODY>
</HTML>

特别说明:在main.html中showModalDialog的方法时,有使用到Math.random()的目的是避免缓存。

3.showModalDialog详细使用
vReturnValue=window.showModalDialog(sURL[,vArguments][,sFeatures])
sURL
必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
vArguments
可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures
可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
dialogHeight对话框高度,不小于100px,IE4中dialogHeight和dialogWidth默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
dialogWidth:对话框宽度。
dialogLeft:距离桌面左的距离。
dialogTop:离桌面上的距离。
center:{yes|no|1|0}:窗口是否居中,默认yes,但仍可以指定高度和宽度。
help:{yes|no|1|0}:是否显示帮助按钮,默认yes。
resizable:{yes|no|1|0}[IE5+]:是否可被改变大小。默认no。
status:{yes|no|1|0}[IE5+]:是否显示状态栏。默认为yes[Modeless]或no[Modal]。
scroll:{yes|no|1|0|on|off}:指明对话框是否显示滚动条。默认为yes。

还有几个属性是用在HTA中的,在一般的网页中一般不使用。
dialogHide:{yes|no|1|0|on|off}:在打印或者打印预览时对话框是否隐藏。默认为no。
edge:{sunken|raised}:指明对话框的边框样式。默认为raised。
unadorned:{yes|no|1|0|on|off}:默认为no。

4.浏览器兼容
但是并不是所有浏览器对兼容这样的用法。
在Chrome中运行上面的例子的话,父窗口可以任意获取焦点,效果和window.open一样,而且获取的returnVale也是undefined.
以下是各主流浏览器对此方法的支持状况。

浏览器 是否支持 状态
IE9  
Firefox13.0  
safari5.1  
chrome19.0 × 并不是模态对话框,而是open了一个新窗体
Opera12.0 × 什么也发生,连个窗体都不弹

如果有传入vArguments这个参数为window的话:

var ret = window.showModalDialog("sub.html?temp="+Math.random(),window);

则在子窗口中,以下的值为:
浏览器 模态对话框 window.opener window.dialogArguments returnValue 
 IE9  ○  undefined  [object Window]  ○
 Firefox13.0  ○  [objectWindow]  [object Window]  ○
 safari5.1  ○  [objectWindow]  [object Window]  ○
 chrome19.0  ×  [objectWindow]  undefined  ×

注意一下Firefox浏览器下,子窗体假如刷新的话window.dialogArguments照样会丢失,变成undefined。以上结果中我们可以看出返回值returnValue就只有chrome浏览器返回的是undefined,其他浏览器都没有问题

5.如何解决Chrome的兼容问题。
方向是:设置window.opener.returnValue=""
main.html

<HTML>  
<HEAD>  
<META NAME="GENERATOR" Content="oscar999">  
</HEAD>  
<script>
function showmodal()
{
  var ret = window.showModalDialog("sub.html?temp="+Math.random(),window);
  //for Chrome
  if(ret==undefined)
  {
    ret = window.returnValue;
  }
  alert("sub return value is "+ret);
}
</script>
<BODY>  
<INPUT id=button1 type=button value="open sub" name=button1 onclick="showmodal();">  
</BODY>  
</HTML>

sub.html
<HTML>  
<HEAD>  
<META NAME="GENERATOR" Content="oscar999">  
</HEAD>  
<script>
function returnMain()
{
  if(window.opener!=undefined)
  {
    window.opener.returnValue = "return from sub"; 
  }else{
    window.returnValue = "return from sub";
  }
  window.close();
}
</script>
<BODY>  
<INPUT id=button1 type=button value="return and close" name=button1 onclick="returnMain()">  
</BODY>  
</HTML>

这里是判断某些对象是否为defined来区分浏览器。当然,也可以判断浏览器的类型的方式进行

这里是借用了父窗口的returnValue来使用, 如果父窗口的returnValue也用其他用途是可以使用替换的方式进行了, as:
var oldValue  = window.returnValue;
var newValue = showModalDialog()
window.returnValue = oldValue 

6.需要特别注意的是,Chrome下的测试需要把html 文件放入到web server(Tomcat,...)下通过http url 访问测试。否则就不成功了。

Javascript 相关文章推荐
javascript jq 弹出层实例
Aug 25 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
JQuery基础语法小结
Feb 27 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
Jun 08 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
angular实现form验证实例代码
Jan 17 Javascript
VUE脚手架具体使用方法
May 20 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 #Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 #Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 #Javascript
javascript遍历控件实例详细解析
Jan 10 #Javascript
关闭ie窗口清除Session的解决方法
Jan 10 #Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 #Javascript
JS实现根据出生年月计算年龄
Jan 10 #Javascript
You might like
PHP6新特性分析
2016/03/03 PHP
PHP中常用的魔术方法
2017/04/28 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
js如何实现设计模式中的模板方法
2013/07/23 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
提升Python程序性能的7个习惯
2019/04/14 Python
Django框架验证码用法实例分析
2019/05/10 Python
Python创建或生成列表的操作方法
2019/06/19 Python
python批量图片处理简单示例
2019/08/06 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
Python tkinter常用操作代码实例
2020/01/03 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
校长创先争优承诺书
2014/08/30 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle