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 相关文章推荐
jquery选择器(常用选择器说明)
Sep 28 Javascript
FireBug 调试JS入门教程 如何调试JS
Dec 23 Javascript
javascript教程之不完整的继承(js原型链)
Jan 13 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 Javascript
js创建对象几种方式的优缺点对比
Sep 28 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
JavaScript自定义超时API代码实例
Apr 30 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
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
PHP asXML()函数讲解
2019/02/03 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
Python3中多线程编程的队列运作示例
2015/04/16 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
database面试题
2013/03/28 面试题
文员自我评价怎么写
2013/09/19 职场文书
岗位职责定义及内容
2013/11/08 职场文书
捐书活动总结
2014/05/04 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
Python利用FlashText算法实现替换字符串
2022/03/31 Python
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS
Rust中的Struct使用示例详解
2022/08/14 Javascript