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

ModalDialog 是什么？
showModalDialog 是js window对象的一个方法，和window.open一样都是打开一个新的页面。
区别是： showModalDialog打开子窗口后，父窗口就不能获取焦点了（也就是无法操作了）。
可以在子窗口中通过设置 window.returnValue 的值，让父窗口可以获取这个return value.

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

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

sub.html

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

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

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

浏览器兼容
但是并不是所有浏览器对兼容这样的用法。
在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，其他浏览器都没有问题

如何解决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 Chromeif(ret==undefined){ret = window.returnValue;}alert("sub return value is "+ret);
}
</script>
<BODY>
<INPUT id=button1 type=button value="open sub" name=button1 οnclick="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 οnclick="returnMain()">
</BODY>
</HTML>

这里是判断某些对象是否为defined来区分浏览器。当然，也可以判断浏览器的类型的方式进行
http://blog.csdn.net/oscar999/article/details/8272798

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

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

showModalDialog模态对话框的使用以及浏览器兼容相关推荐

showModalDialog模态对话框的使用及一般问题的解决
showModalDialog模态对话框的使用及一般问题的解决 1,使用 showModalDialog(sURL [, oArguments] [,sFeatures]) 参数 : sURL : ...
showModalDialog模态对话框的使用详解以及浏览器兼容
showModalDialog是jswindow对象的一个方法,和window.open一样都是打开一个新的页面.区别是:showModalDialog打开子窗口后,父窗口就不能获取焦点了(也就是无法 ...
Java中modal dialog,showModalDialog模态对话框的使用详解以及浏览器兼容
1.ModalDialog是什么?showModalDialog是jswindow对象的一个方法,和window.open一样都是打开一个新的页面. 区别是:showModalDialog打开子窗口后 ...
window.showModalDialog模态对话框值回传 TreeView无刷新
要求: 点击父页面的text,弹出子页面,将在子页面TreeView选择的值传回,其中子页面树选中叶子节点应有颜色变化(显示选中),且页面不刷新. 实现: 使用window.showModalDial ...
浏览器兼容：改写window.showModalDialog
以前很多网页都使用如下脚本来打开对话框,这脚本只能在IE下使用,对于某些浏览器来说完全不兼容. var returnValue = window.showModalDialog(url,'',feat ...
前台技术--window.showModalDialog带来的浏览器兼容问题
双击域的实现:http://blog.csdn.net/gaopeng0071/article/details/21179619, 继此篇博文,讲述的双击域实现,在后续发现使用window.showM ...
使用javascript打开模态对话框
1. 标准的方法 <script type="text/javascript"> function openWin(src, width, height, show ...
转：模态对话框的支持（IE,Firefox,Chrome）
原文:模态对话框的支持 (IE,Firefox,Chrome) Opera 和 Chrome 对模态对话框(showModalDialog)的支持有缺陷,且非 IE 浏览器均不支持非模态对话框(sho ...
JavaScript多浏览器兼容
Javascript 多浏览器兼容一.document.formName.item("itemName") 问题问题说明:IE下,可以使用 document.formName. ...

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

showModalDialog模态对话框的使用以及浏览器兼容相关推荐

最新文章

热门文章