全面解析window open()的用法

使用window.open()方法时，一般会存在以下几种情形：

1.单纯的打开窗口；
2.打开窗口并以get的方式，将参数放在请求的url后面传递参数（适合参数较少、类型简单的情形）；
3.打开窗口并以post的方式进行传递参数（适合参数较多、类型复杂的情形）；
4.打开窗口后，子页面给父页面返回值；

语法

var windowObjectReference = window.open(strUrl, strWindowName, [strWindowFeatures]);

参数与返回值

WindowObjectReference

打开的新窗口对象的引用。如果调用失败，返回值会是 null 。如果父子窗口满足“同源策略”，你可以通过这个引用访问新窗口的属性或方法。

strUrl

新窗口需要载入的url地址。strUrl可以是web上的html页面也可以是图片文件或者其他任何浏览器支持的文件格式。

strWindowName

新窗口的名称。该字符串可以用来作为超链接 <a> 或表单<form> 元素的目标属性值。字符串中不能含有空白字符。注意：strWindowName 并不是新窗口的标题。

strWindowFeatures

可选参数。是一个字符串值，这个值列出了将要打开的窗口的一些特性(窗口功能和工具栏) 。 字符串中不能包含任何空白字符，特性之间用逗号分隔开。参考下文的位置和尺寸特征。

特别提醒：

1.窗口的创建和相关资源的加载是异步的；
2.如果存在以 strWindowName为相同名称的窗口，则不再打开一个新窗口，而是把 strUrl 加载到这个窗口中；

单纯的打开窗口

打开窗口，并让窗口位置居中的Javascript代码如下：

function openNewWindow(){
    //窗口高度
    var iHeight = 500;
    //窗口宽度
    var iWidth = 850;
    //获得窗口的垂直位置
    var iTop = (window.screen.availHeight- iHeight) / 2;
    //获得窗口的水平位置
    var iLeft = (window.screen.availWidth - iWidth) / 2;
    var windowStyle = 'height=' + iHeight + ',width=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=0,titlebar=no';
    window.open("url", 'newwindow', windowStyle)
}

另一种让窗口居中的Javascript代码如下：

function openNewWindow(){
    //窗口高度
    var iHeight = 500;
    //窗口宽度
    var iWidth = 850;
    //获得窗口的垂直位置
    var iTop = (window.screen.availHeight- iHeight) / 2;
    //获得窗口的水平位置
    var iLeft = (window.screen.availWidth - iWidth) / 2;
    var windowStyle = 'height=' + iHeight + ',width=' + iWidth + ',status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=0,titlebar=no';
    subWindow = window.open("url", 'newwindow', windowStyle)
    subWindow.moveTo(iLeft,iTop);
}

以get的方式传递参数

比如下面的代码：

function openNewWindow(){
    var postStr = 'event.guid=CB306775-8DAD-4DFB-B218-1DC470352F45';
    //窗口高度
    var iHeight = 500;
    //窗口宽度
    var iWidth = 850;
    //获得窗口的垂直位置
    var iTop = (window.screen.availHeight- iHeight) / 2;
    //获得窗口的水平位置
    var iLeft = (window.screen.availWidth - iWidth) / 2;
    var windowStyle = 'height=' + iHeight + ',width=' + iWidth + ',status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=0,titlebar=no';
    subWindow = window.open("url?"+postStr, 'newwindow', windowStyle)
    subWindow.moveTo(iLeft,iTop);
}

如果是这种方式，在后台获取参数就不说了，如果是在jsp页面，可以通过下面的方式获取参数：

var afterUrl =  window.location.search.substring(1);(问号以后的字符串)
var afterEqual = afterUrl.substring(afterUrl.indexOf('=')+1).toUpperCase();(等号以后的字符串，及你所要的参数)

以post的方式传递参数

下面是一种以post的方式实现window.open()传递参数的方法，如果有其他方式，请告知以补充：

Javascript代码：

function openNewWindow(){
    //窗口高度
    var iHeight = 500;
    //窗口宽度
    var iWidth = 850;
    //获得窗口的垂直位置
    var iTop = (window.screen.availHeight- iHeight) / 2;
    //获得窗口的水平位置
    var iLeft = (window.screen.availWidth - iWidth) / 2;
    var windowStyle = 'height=' + iHeight + ',width=' + iWidth + ',status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=0,titlebar=no';
    subWindow = window.open("url", 'alarmConfigWindow', windowStyle)
    subWindow.moveTo(iLeft,iTop);
    document.getElementById('alarmConfigForm').submit();
}

HTML部分代码：

<form id="alarmConfigForm" method="post" action="<s:url action="modifyAlarmConfig" namespace="/ibnms/config"/>" target="alarmConfigWindow" >
    <input type="hidden" name="event.guid" value="" />
    <input type="hidden" name="event.kpiId" value="" />
    <input type="hidden" name="event.unitId" value="" />
    <input type="hidden" name="event.expression.expressionDesc" value="" />
</form>

通过上述方式就可以将表单名称为alarmConfigForm中的参数提交到后台。当然你也可以不用在HTML中创建表单，直接在js代码中操作，如：

function openNewWindow(){
   //创建表单
   var form = document.createElement("form");
   form.setAttribute("method", "post");
   form.setAttribute("action", "提交的Url");

   form.setAttribute("target", "alarmConfigWindow");

   var hiddenField = document.createElement("input"); 
   hiddenField.setAttribute("type", "hidden");
   hiddenField.setAttribute("name", "event.guid");
   hiddenField.setAttribute("value", "val");
   form.appendChild(hiddenField);
   document.body.appendChild(form);

    //窗口高度
    var iHeight = 500;
    //窗口宽度
    var iWidth = 850;
    //获得窗口的垂直位置
    var iTop = (window.screen.availHeight- iHeight) / 2;
    //获得窗口的水平位置
    var iLeft = (window.screen.availWidth - iWidth) / 2;
    var windowStyle = 'height=' + iHeight + ',width=' + iWidth + ',status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=0,titlebar=no';
    subWindow = window.open("url", 'alarmConfigWindow', windowStyle)
    subWindow.moveTo(iLeft,iTop);

    form.submit();
}

子页面给父页面传值

可以通过直接调用父页面的js函数操作，或者直接dom操作父页面。参考：【页面之间传参】

参考地址：

1.window.open；
2.Window.Open参数、返回值；
3.js window.open()弹出窗口参数说明及居中设置；
4.window.open()参数传递及获取；
5.使用window.open替代window.ShowModalDialog，完成子页面和父页面之间的传值；
6.Window.open and pass parameters by post method；
7.Using the window.open method；