全面解析window open()的用法

洼地云 tuoyidashi.png

使用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

赞(2)
未经允许禁止转载:优米格 » 全面解析window open()的用法

评论 抢沙发

合作&反馈&投稿

商务合作、问题反馈、投稿,欢迎联系

广告合作侵权联系

登录

找回密码

注册