首頁 > web前端 > js教程 > window.open以post方式將內容提交到新視窗_javascript技巧

window.open以post方式將內容提交到新視窗_javascript技巧

WBOY
發布: 2016-05-16 17:45:28
原創
1186 人瀏覽過
第一種方式
最近在做web項目,碰到需要跨頁面傳遞參數的功能,就是那種需要把當前頁面的內容帶到新開的子窗體中,以前的做法是傳一個id過去,然後在新視窗中去讀資料庫的內容。雖然不怎麼麻煩,但是如果內容麼有在資料庫裡保存,光是處以擬稿狀態時,就不能實現了,用戶還常常認為是個bug。考慮採用get的方式傳遞,把需要的內容都序列化然後,透過url去傳,顯得很臃腫,而且get的傳遞內容長度有限制。於是就想到用post的方式傳遞,問題在於open方法不能設定請求方式,一般網頁的post都是透過form來實現的。如果只是模擬form的提交方式,那麼open方法裡那種可設定窗體屬性的參數又不能用。最後想辦法整了這麼一個兩者結合的方式,將form的target設定成和open的name參數一樣的值,透過瀏覽器自動辨識實現了將內容post到新視窗。

比較有趣的是直接透過調用form的submit方法不能觸發onsubmit事件,查看了幫助文檔,必須手動的觸發,否則只能看到頁面刷新而沒有打開新視窗。程式碼中只傳遞了一個參數內容,實際上可傳遞多個。
具體程式碼如下:
複製程式碼 程式碼如下:
<script>< >function openPostWindow(url, data, name) <BR>{ <BR>var tempForm = document.createElement("form"); <BR>tempForm.id="tempForm1"; <BR>tempForm.method="post" ; <BR>tempForm.action=url; <BR>tempForm.target=name; <BR>var hideInput = document.createElement("input"); <BR>hideInput.type="hidden"; <BR>hideInput. name= "content" <BR>hideInput.value= data; <BR>tempForm.appendChild(hideInput); <BR>tempForm.attachEvent("onsubmit",function(){ openWindow(name); }); <BR> document.body.appendChild(tempForm); <BR>tempForm.fireEvent("onsubmit"); <BR>tempForm.submit(); <BR>document.body.removeChild(tempForm); <BR>} <BR>function openWindow(name) <BR>{ <BR>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'); <BR>} <BR></script>


第二種方式

複製程式碼複製程式碼
程式碼如下:


function WindowWithPost(url,name,keys,values)
var newWindow = window.open(url, name);
if (!newWindow)
return false;
var html = "";
html = "
";
if (keys && values)
{
html = "";
}
html = "
".toString().replace(/^. ?*|\(?=/)| *. ?$/gi, "");
newWindow.document.write(html);
return newWindow;
}

建議使用第一種方式,第二種方式測試過程中發現,與日曆彈出框衝突,如果子頁面上有日曆彈出框,點日曆框會不停刷新頁面,不會彈出日曆框。當然,也可能是我用的日曆框的問題。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板