Javascript:window.open()方法采用post传值的改写方式

最近在做web项目，碰到需要跨页面传递参数的功能，就是那种需要把当前页面的内容带到新开的子窗体中。采用js中window.open()方法请求子页面或刷新父页面信息，仅支持以get的方式传递，把需要的内容或参数全部序列化，然后通过url去传，显得url很臃肿，而且get的传递内容长度有限制。

在web项目开发中，考虑数据的安全性及传递内容的体量，通常会倾向于采用post的方式传递参数。问题在于open方法不能设置请求方式，一般网页的post都是通过form来实现的。如果仅仅模拟form的提交方式，那么open方法里那种可设置窗体属性的参数又不能用。

最后通过查阅相关资料及借鉴js其他的功能，逐渐实现window.open()与post相结合的功能:将form的target设置成和open的name参数一样的值，通过浏览器自动识别实现了将内容post到新窗口中。

比较有意思的是直接通过调用form的submit方法不能触发onsubmit事件，查看了帮助文档，必须手动的触发，否则只能看到页面刷新而没有打开新窗口。

具体改写方法如下：

0.1. 打开子页面

示例代码：
window.open('proj_list.html?prod_type=web&ln_department_id=ln_department_id','newwindow',"height=300,width=800,top=400,left=800,toolbar=yes,menubar=yes,scrollbars=yes,resizable=yes");

改写后的方法如下：

var add_form=$('<form action="proj_list.html" method="post" target="newwindow"></form>');
    add_form.append('<input style="display:none" name="prod_type" value="web"/>');
    add_form.append('<input style="display:none" name="ln_department_id" value="'+ln_department_id+'"/>');
$(document.body).append(add_form);
add_form.submit(function(){
    window.open('about:blank','newwindow',"height=300,width=800,top=400,left=800,toolbar=yes,menubar=yes,scrollbars=yes,resizable=yes");
}); //此处很关键
add_form.submit();

新方法的关键在于：

form表单的target和即将打开的子页面name参数相同(同为“newwindow”)；
为form表单添加提交触发功能，先打开一个空的子页面，然后借用post功能，将form表单所指的url和对应的参数传入子页面。

0.2. 刷新父页面

示例代码：
window.opener.location.href='proj_list.html?prod_type=web&ln_department_id=ln_department_id';

改写后的方法如下：

var parent_form=$('<form action="proj_list.html" method="post" target="opener"></form>');
    parent_form.append('<input style="display:none" name="prod_type" value="'+'web'+'"/>');
    parent_form.append('<input style="display:none" name="ln_department_id" value="'+ln_department_id+'"/>');
$(document.body).append(parent_form);
parent_form.submit();