window.open以post方式將內(nèi)容提交到新窗口
更新時(shí)間:2012年12月26日 10:53:54 作者:
最近在做web項(xiàng)目,碰到需要跨頁面?zhèn)鬟f參數(shù)的功能,就是那種需要把當(dāng)前頁面的內(nèi)容帶到新開的子窗體中,以前的做法是傳一個(gè)id過去,然后在新窗口中去讀數(shù)據(jù)庫的內(nèi)容;比較有意思的是直接通過調(diào)用form的submit方法不能觸發(fā)onsubmit事件,查看了幫助文檔,必須手動(dòng)的觸發(fā),否則只能看到頁面刷新而沒有打開新窗口
第一種方式
最近在做web項(xiàng)目,碰到需要跨頁面?zhèn)鬟f參數(shù)的功能,就是那種需要把當(dāng)前頁面的內(nèi)容帶到新開的子窗體中,以前的做法是傳一個(gè)id過去,然后在新窗口中去讀數(shù)據(jù)庫的內(nèi)容。雖然不怎么麻煩,但是如果內(nèi)容么有在數(shù)據(jù)庫里保存,僅僅是處以擬稿狀態(tài)時(shí),就不能實(shí)現(xiàn)了,用戶還常常認(rèn)為是個(gè)bug??紤]采用get的方式傳遞,把需要的內(nèi)容都序列化然后,通過url去傳,顯得很臃腫,而且get的傳遞內(nèi)容長度有限制。于是就想到用post的方式傳遞,問題在于open方法不能設(shè)置請求方式,一般網(wǎng)頁的post都是通過form來實(shí)現(xiàn)的。如果僅僅模擬form的提交方式,那么open方法里那種可設(shè)置窗體屬性的參數(shù)又不能用。最后想辦法整了這么一個(gè)兩者結(jié)合的方式,將form的target設(shè)置成和open的name參數(shù)一樣的值,通過瀏覽器自動(dòng)識別實(shí)現(xiàn)了將內(nèi)容post到新窗口中。
比較有意思的是直接通過調(diào)用form的submit方法不能觸發(fā)onsubmit事件,查看了幫助文檔,必須手動(dòng)的觸發(fā),否則只能看到頁面刷新而沒有打開新窗口。代碼中只傳遞了一個(gè)參數(shù)內(nèi)容,實(shí)際可傳遞多個(gè)。
具體代碼如下:
<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;
}
推薦使用第一種方式,第二種方式測試過程中發(fā)現(xiàn),與日歷彈出框沖突,如果子頁面上有日歷彈出框,則點(diǎn)日歷框會(huì)不停刷新頁面,不會(huì)彈出日歷框。當(dāng)然,也可能是我用的日歷框的問題。
最近在做web項(xiàng)目,碰到需要跨頁面?zhèn)鬟f參數(shù)的功能,就是那種需要把當(dāng)前頁面的內(nèi)容帶到新開的子窗體中,以前的做法是傳一個(gè)id過去,然后在新窗口中去讀數(shù)據(jù)庫的內(nèi)容。雖然不怎么麻煩,但是如果內(nèi)容么有在數(shù)據(jù)庫里保存,僅僅是處以擬稿狀態(tài)時(shí),就不能實(shí)現(xiàn)了,用戶還常常認(rèn)為是個(gè)bug??紤]采用get的方式傳遞,把需要的內(nèi)容都序列化然后,通過url去傳,顯得很臃腫,而且get的傳遞內(nèi)容長度有限制。于是就想到用post的方式傳遞,問題在于open方法不能設(shè)置請求方式,一般網(wǎng)頁的post都是通過form來實(shí)現(xiàn)的。如果僅僅模擬form的提交方式,那么open方法里那種可設(shè)置窗體屬性的參數(shù)又不能用。最后想辦法整了這么一個(gè)兩者結(jié)合的方式,將form的target設(shè)置成和open的name參數(shù)一樣的值,通過瀏覽器自動(dòng)識別實(shí)現(xiàn)了將內(nèi)容post到新窗口中。
比較有意思的是直接通過調(diào)用form的submit方法不能觸發(fā)onsubmit事件,查看了幫助文檔,必須手動(dòng)的觸發(fā),否則只能看到頁面刷新而沒有打開新窗口。代碼中只傳遞了一個(gè)參數(shù)內(nèi)容,實(shí)際可傳遞多個(gè)。
具體代碼如下:
復(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>
第二種方式
復(fù)制代碼 代碼如下:
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;
}
推薦使用第一種方式,第二種方式測試過程中發(fā)現(xiàn),與日歷彈出框沖突,如果子頁面上有日歷彈出框,則點(diǎn)日歷框會(huì)不停刷新頁面,不會(huì)彈出日歷框。當(dāng)然,也可能是我用的日歷框的問題。
相關(guān)文章
基于邏輯運(yùn)算的簡單權(quán)限系統(tǒng)(實(shí)現(xiàn)) JS 版
基于邏輯運(yùn)算的簡單權(quán)限系統(tǒng)(實(shí)現(xiàn)) JS 版...2007-03-03js獲取html參數(shù)及向swf傳遞參數(shù)應(yīng)用介紹
HTML頁面是在客戶端執(zhí)行的,這樣要獲取參數(shù)必須使用客戶端腳本如JavaScript,在這點(diǎn)上與服務(wù)器端腳本獲取參數(shù)方式有所不同接下來將詳細(xì)介紹下感興趣的你可不要錯(cuò)過了哈2013-02-02在JavaScript中查找字符串中最長單詞的三種方法(推薦)
這篇文章主要介紹了在JavaScript中查找字符串中最長單詞的三種方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-01js HTML5 Ajax實(shí)現(xiàn)文件上傳進(jìn)度條功能
這篇文章主要介紹了javascript實(shí)現(xiàn)文件上傳進(jìn)度條功能的相關(guān)資料啊,感興趣的朋友可以參考一下2016-02-02js 動(dòng)態(tài)添加元素(div、li、img等)及設(shè)置屬性的方法
下面小編就為大家?guī)硪黄猨s 動(dòng)態(tài)添加元素(div、li、img等)及設(shè)置屬性的方法。小編覺得聽不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07JavaScript實(shí)現(xiàn)點(diǎn)擊出現(xiàn)子菜單效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊出現(xiàn)子菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-02-02JS彈出可拖拽可關(guān)閉的div層完整實(shí)例
這篇文章主要介紹了JS彈出可拖拽可關(guān)閉的div層完整實(shí)現(xiàn)方法,包括對div彈出層的樣式及功能的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02