window.open以post方式將內容提交到新窗口

更新時間：2012年12月26日 10:53:54 作者：

最近在做web項目，碰到需要跨頁面?zhèn)鬟f參數的功能，就是那種需要把當前頁面的內容帶到新開的子窗體中，以前的做法是傳一個id過去，然后在新窗口中去讀數據庫的內容;比較有意思的是直接通過調用form的submit方法不能觸發(fā)onsubmit事件，查看了幫助文檔，必須手動的觸發(fā)，否則只能看到頁面刷新而沒有打開新窗口

第一種方式
最近在做web項目，碰到需要跨頁面?zhèn)鬟f參數的功能，就是那種需要把當前頁面的內容帶到新開的子窗體中，以前的做法是傳一個id過去，然后在新窗口中去讀數據庫的內容。雖然不怎么麻煩，但是如果內容么有在數據庫里保存，僅僅是處以擬稿狀態(tài)時，就不能實現(xiàn)了，用戶還常常認為是個bug?？紤]采用get的方式傳遞，把需要的內容都序列化然后，通過url去傳，顯得很臃腫，而且get的傳遞內容長度有限制。于是就想到用post的方式傳遞，問題在于open方法不能設置請求方式，一般網頁的post都是通過form來實現(xiàn)的。如果僅僅模擬form的提交方式，那么open方法里那種可設置窗體屬性的參數又不能用。最后想辦法整了這么一個兩者結合的方式，將form的target設置成和open的name參數一樣的值，通過瀏覽器自動識別實現(xiàn)了將內容post到新窗口中。

比較有意思的是直接通過調用form的submit方法不能觸發(fā)onsubmit事件，查看了幫助文檔，必須手動的觸發(fā)，否則只能看到頁面刷新而沒有打開新窗口。代碼中只傳遞了一個參數內容，實際可傳遞多個。
具體代碼如下：

復制代碼代碼如下:

 
<script> 
function openPostWindow(url, data, name) 
{ 
var tempForm = document.createElement("form"); 
tempForm.id="tempForm1"; 
tempForm.method="post"; 
tempForm.action=url; 
tempForm.target=name; 
var hideInput = document.createElement("input"); 
hideInput.type="hidden"; 
hideInput.name= "content" 
hideInput.value= data; 
tempForm.appendChild(hideInput); 
tempForm.attachEvent("onsubmit",function(){ openWindow(name); }); 
document.body.appendChild(tempForm); 
tempForm.fireEvent("onsubmit"); 
tempForm.submit(); 
document.body.removeChild(tempForm); 
} 
function openWindow(name) 
{ 
window.open('about:blank',name,'height=400, width=400, top=0, left=0, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=yes, status=yes'); 
} 
</script> 

第二種方式

復制代碼代碼如下:

 
function openWindowWithPost(url,name,keys,values) 
{ 
var newWindow = window.open(url, name); 
if (!newWindow) 
return false; 
var html = ""; 
html += "<html><head></head><body><form id='formid' method='post' action='" + url + "'>"; 
if (keys && values) 
{ 
html += "<input type='hidden' name='" + keys + "' value='" + values + "'/>"; 
} 
html += "</form><script type='text/javascript'>document.getElementById('formid').submit();"; 
html += "<\/script></body></html>".toString().replace(/^.+?\*|\\(?=\/)|\*.+?$/gi, ""); 
newWindow.document.write(html); 
return newWindow; 
} 