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()來創建一個空的頁面，然后動態創建一個表單，將要傳遞的數據，填充到這個表單中，把這個表單插入到這個空頁面中，最后自動提交表單，跳轉到我們指定的頁面。

function openPostWindow(url, params) {

    var newWin = window.open(),
          formStr = '';
     //設置樣式為隱藏，打開新標簽再跳轉頁面前，如果有可現實的表單選項，用戶會看到表單內容數據
     formStr = '<form style="visibility:hidden;" method="POST" action="' + url + '">' +
          '<input type="hidden" name="params" value="' + params + '" />' +
          '</form>';

    newWin.document.body.innerHTML = formStr;
    newWin.document.forms[0].submit();
    
    return newWin;
}

 

兼容性問題

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的方式與父頁面進行數據通信。