window.open()提交POST数据

window.open(URL,name,specs,replace)   > Details

我们一般都是通过window.open(url, name, specs)以GET方式让浏览器打开一个新的页签，如果需要传递参数，就追加在url后面，如 http://demo/?a=1&b=2

问题思考

1）后面的参数如果太长该怎么办，浏览器对url长度是有限制的；

2）涉及到一些敏感数据，不想直接暴露出来；

解决方案

用POST方式来提交数据，但是window.open只允许我们用GET方式来打开页面。好，思路如下：

借用表单来提交数据，首先用window.open()来创建一个空的页面，然后动态创建一个表单，将要传递的数据，填充到这个表单中，把这个表单插入到这个空页面中，最后自动提交表单，跳转到我们指定的页面。

 1 function openPostWindow(url, params) {

 2 

 3     var newWin = window.open(),

 4           formStr = '';

 5      //设置样式为隐藏，打开新标签再跳转页面前，如果有可现实的表单选项，用户会看到表单内容数据

 6      formStr = '<form style="visibility:hidden;" method="POST" action="' + url + '">' +

 7           '<input type="hidden" name="params" value="' + params + '" />' +

 8           '</form>';

 9 

10     newWin.document.body.innerHTML = formStr;

11     newWin.document.forms[0].submit();

12     

13     return newWin;

14 }

 

兼容性问题

var newWin = window.open();

将一段HTML代码，插入到一个页面中有三种方法：

1）document.body.appendChild(yourCode)

2 ) document.body.innerHTML = yourCode

3 ) document.write(yourCode)

使用newWin.doucment.body.appendChild(formElm )方法将表单元素插入到空页面，IE8下会报错Error:不支持此方法接口 ，而其它浏览器正常，因此选择另外两种方法了。

另外一种方式是，在window.open()的页面内，通过window.opener的方式与父页面进行数据通信。