首頁 > 開發者 > JavaScript
第一種方式
最近在做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)
{
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;
}
推薦使用第一種方式，第二種方式測試過程中發現，與日曆彈出框衝突，如果子頁面上有日曆彈出框，則點日曆框會不停重新整理頁面，不會彈出日曆框。當然，也可能是我用的日曆框的問題。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
