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 相关文章推荐
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
Javascript基础教程之变量
Jan 18 Javascript
jQuery UI制作选项卡(tabs)
Dec 13 Javascript
jQuery实现文档树效果
Feb 20 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
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
一个简单实现多条件查询的例子
2006/10/09 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
使用Python对Csv文件操作实例代码
2017/05/12 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
机电专业毕业生推荐信
2013/11/10 职场文书
高校教师思想汇报
2014/01/11 职场文书
优秀共产党员先进事迹
2014/01/27 职场文书
大学生村官承诺书
2014/03/28 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
公司会议策划方案
2014/05/17 职场文书
自查自纠整改报告
2014/11/06 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
坎儿井导游词
2015/02/09 职场文书
肖申克救赎观后感
2015/06/02 职场文书
趣味运动会标语口号
2015/12/26 职场文书
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js
mysql查找连续出现n次以上的数字
2022/05/11 MySQL