window.open和window.showModalDialog心得

最近在一个项目上做一个弹出窗，在弹出窗中选取值后返回到父页面。为了样式统一没有用layer等弹出窗插件，而用js自带的方法，下面讲一下使用心得。

1.window.open是非阻塞式，也可以说非模态窗口。而window.showModalDialog是阻塞式模态窗口。阻塞或者模态窗口，只有你把当前窗口关闭后，才能去操作父亲窗口。

2.在页面上点击一个按钮，执行doClick方法弹出窗口，如下。url为弹出的jsp页面，可以去跳到后端去转跳页面。

function doClick(){
    var url = PATH+"/...";
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    if (userAgent.indexOf("Chrome") > -1){
        var iWidth = 330;
        var iHeight = 350;
        var iTop = (window.screen.availHeight - 30 - iHeight) / 2;
        var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
        window.open(url,"openWin","width=" + iWidth + ", height=" + iHeight + ",top=" + iTop + ",left=" + iLeft 
                        + ",menubar=no,toolbar=no,location=no,scrollbars=no,status=no,modal=yes");
    } else if (userAgent.indexOf("Firefox") > -1) {
        var iWidth = 330;
        var iHeight = 350;
        var iTop = (window.screen.availHeight - 30 - iHeight) / 2;
        var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
        window.open(url,"openWin","width=" + iWidth + ", height=" + iHeight + ",top=" + iTop + ",left=" + iLeft 
                        + ",menubar=no,toolbar=no,location=no,scrollbars=no,status=no,modal=yes");
    } else {
        name= window.showModalDialog(url,'openWin','modal=yes,status=no;scroll=yes;resizable=no;dialogWidth=330px;dialogHeight=350px');
        setTab(name);
    }
}

从代码中可以看到我们支持了Chrome，Firefox和ie三种浏览器，关键的问题是三种浏览器如何将弹出窗中的值返回到父页面。

3.在弹出窗中点击保存按钮执行doSave方法

function doSave(){
    var name= $("#name").val();
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    if (userAgent.indexOf("Chrome") > -1){
        window.opener.setTab(name); 
    } else if (userAgent.indexOf("Firefox") > -1) {
        window.opener.setTab(name); 
    } else {
        window.returnValue = name;
    } 
    top.close();
}

结合2中的代码可以看出，对于ie浏览器直接用window.returnValue将需要返回的值传递到父页面，在父页面接收到返回值（name）再调用setTab（name）方法处理返回值，而Chrome和Firefox是利用window.opener直接调用父页面的setTab（name）方法将值（name）传递到父页面进行处理。

注意：
（1）window.showModalDialog是用在低版本的浏览器，高版本的浏览器只用window.open就可以了。
（2）以上的弹出窗一定会有返回值，即使是点击弹出窗右上角的叉号，所以需要对返回值判断，判断返回值是否是undefined，因为如果第一次打开弹出窗将返回值保存到父页面后再次打开弹出窗，点击叉号关闭弹出窗会清空父页面保存的返回值。