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 文档碎片
Jul 13 Javascript
JS实现标签页效果(配合css)
Apr 03 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 Javascript
JavaScript实现Excel表格效果
Feb 07 Javascript
vue实现公共方法抽离
Jul 31 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
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
php 页面执行时间计算代码
2008/12/04 PHP
codeigniter框架批量插入数据
2014/01/09 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
javascript编程起步(第四课)
2007/01/10 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
sails框架的学习指南
2014/12/22 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
解析js如何获取css样式
2016/12/11 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
总结js函数相关知识点
2018/02/27 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
如何通过Python实现标签云算法
2019/07/02 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
学生会生活部工作总结2015
2015/03/31 职场文书
超市主管竞聘书
2015/09/15 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
PyTorch device与cuda.device用法
2022/04/03 Python
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS