首页logo
  •  

jonllen

金龙,目前就职于一家软件公司,从事Java和.Net信息安全开发设计。

个人档案

jonllen
心情闪存 | 给他留言
妮称:jonllen
来自:中国. 湖南. 湘潭
简述:金龙,目前就职于一家软件公司,从事Java和.Net信息安全开发设计。
博客日历

showModalDialog、showModelessDialog和open异同

分类:JavaScript

1.showModalDialog

大部分浏览器已支持showModalDialog函数,我们叫它为模态对话框,它有个好处是打开之后会始终保持输入焦点,在关闭它之前父窗体是无法获取焦点,这可以阻塞用户的操作等待返回,代码如下:

function openModalDialog(){
var vReturnValue = window.showModalDialog('http://www.google.com/' ,'' ,'dialogHeight=400px; dialogWidth=600px; center=yes; resizable=yes; status=yes');
alert(
'ReturnValue:'+vReturnValue);
}

2.showModelessDialog

showModelessDialog方法打开的窗体为非模态对话框,与showModalDialog模态对话框不同的是用户可以随便切换输入焦点,因此它不会阻塞线程等待返回结果,代码如下:

function openModelessDialog(){
var vReturnValue = window.showModelessDialog('http://www.baidu.com/' ,'' ,'dialogHeight=400px; dialogWidth=600px; center=yes; resizable=yes; status=yes');
alert(
'ReturnValue:'+vReturnValue);
}

3.open

window.open可能是我们使用得最多了,它用4个可选的参数:URL,name,features,replace,name用作标记 <a> 和 <form> 的属性 target 的值,如果该参数指定了一个已经存在的窗口,那么 open() 方法就不再创建一个新窗口,而只是返回对指定窗口的引用。features参数为窗口特征,replace为是否替换浏览历史中的当前条目的布尔值。代码如下:

function openWindow() {
window.open("http://www.google.com/","","height=400px, width=600px, menubar=yes, scrollbars=yes, toolbar=yes, status=yes, location=yes");

}

4.兼容性

showModalDialog、showModelessDialog和open兼容性最好的是open方法了,这主要因为在W3C标准里Window 对象方法找不到showModalDialog和showModelessDialog,大部分标准浏览器和IE都支持window.open,而前面我说到大部分浏览器也支持showModalDialog函数,那是不完全支持。比如FF在3.0开始才支持showModalDialog(FF2.0是不支持的),chrome浏览器支持但却没有实现showModalDialog模态对话框的效果(形同使用window.open),而showModelessDialog可能是因为用处少,除IE外几乎都不支持,Safari和Opera则是墙头草两边倒。

5.open模拟showModalDialog

正是由于这些兼容性问题,所以我们一般放弃使用这些方法而自己重新实现,例如我们一般会在页面使用模拟弹窗层的办法,前几天在做一项目时用到了window.open方法,突然想到能否用open模拟showModalDialog效果,发现一小伎俩,代码如下:

function openSimulateModalDialog(){
window.newWindow
= window.open("http://www.baidu.com/","","height=400px, width=600px, menubar=yes, scrollbars=yes, toolbar=yes, status=yes, location=yes");
}
document.body.onclick
=function (){
if(window.newWindow && window.newWindow.focus){
newWindow.focus();
}
}

目前脚本在IE和chrome里还有点小问题,同时也没有真正实现showModalDialog效果,因为没办法阻塞线程等待返回,同时并非主窗体在子窗体关闭前无法获取焦点,只是在click时判断是否有打开窗体,有则打开窗体强制获取焦点。

6.小结

虽然没能使用window.open完全实现showModalDialog效果,但有时候觉得想法很重要,故出此文。以前对showModalDialog、showModelessDialog和open的参数也有点模糊,这里也当是总结。

标签:JavaScript
  • posted@ 2010-08-08 12:37
  • update@
  • 阅读(9584)
  • 评论(0)

相关文章

评论
暂无任何评论。
发表评论
*必填
回复通知我
*必填