showModalDialog模态对话框的使用详解以及浏览器兼容
来源:互联网 发布:windows update卡在100 编辑:程序博客网 时间:2024/05/22 20:29
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.
以下是各主流浏览器对此方法的支持状况。
如果有传入vArguments这个参数为window的话:
var ret = window.showModalDialog("sub.html?temp="+Math.random(),window);
则在子窗口中,以下的值为:
浏览器模态对话框window.openerwindow.dialogArgumentsreturnValue 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 访问测试。否则就不成功了
- showModalDialog模态对话框的使用详解以及浏览器兼容
- showModalDialog模态对话框的使用以及浏览器兼容
- 模态对话框showModalDialog的使用
- 谷歌浏览器不支持showModalDialog模态对话框的解决方法
- JS对话框 JS模态对话框 showModalDialog用法详解
- JS对话框 JS模态对话框 showModalDialog用法详解
- JS对话框 JS模态对话框 showModalDialog用法详解
- showModalDialog 模态对话框
- window.showModalDialog() 模态对话框
- showModalDialog模态对话框 的使用及一般问题的解决
- 【转】使用selenium测试showModalDialog模态对话框
- 主题:使用selenium测试showModalDialog模态对话框
- 在BS系统中使用模态对话框(showModalDialog)的解决方案
- 兼容火狐和IE的showModalDialog模态窗口
- BX9036: Opera 和 Chrome 对模态对话框(showModalDialog)的支持有缺陷,且非 IE 浏览器均不支持非模态对话框(showModelessDialog)
- JS对话框 JS模态对话框 showModalDialog用法详解 父窗口:
- showModalDialog以及IE7 对话框样式
- showModalDialog以及IE7 对话框样式
- jquery 选择器
- HDU 2059 龟兔赛跑
- 使用Android Killer时遇到的一个奇怪的问题
- Mesh Collider
- hibernate继承映射2
- showModalDialog模态对话框的使用详解以及浏览器兼容
- tensorflow存储读取神经网络参数
- Python eval 函数的使用
- 工作笔记
- mysql的分区和分表
- 查看和修改linux的PATH环境变量的方法
- 入门C#之数据库增删改查I
- NDK开发笔记---CMake构建JNI
- 《社会性动物》之如何让别人喜欢你