2016/10/24 window.open隱藏引數、引數過長、中文編碼問題
阿新 • • 發佈:2019-02-11
一般 window.open 傳引數都是用Get.方式,在url後面拼接引數。
但這樣有時候並不適用,如:
1)不想被看到引數資訊
2)引數過長,get有限制會被截斷
3)可能有中文編碼問題
所以需要用post方式 ,下面說的就是一種window.open傳送post請求的方法。
網頁的post一般是通過form表單的方式來實現的,所以現在來模擬form表單的方式來實現window.open效果。
主要是通過form的子元素來設定需要傳遞的引數,之後給form表單繫結提交事件並手動觸發提交表單。完成後就是收尾工作————把建立的表單移除。
具體例子如下:
但這樣有時候並不適用,如:
1)不想被看到引數資訊
2)引數過長,get有限制會被截斷
3)可能有中文編碼問題
所以需要用post方式 ,下面說的就是一種window.open傳送post請求的方法。
網頁的post一般是通過form表單的方式來實現的,所以現在來模擬form表單的方式來實現window.open效果。
主要是通過form的子元素來設定需要傳遞的引數,之後給form表單繫結提交事件並手動觸發提交表單。完成後就是收尾工作————把建立的表單移除。
具體例子如下:
/* *url:window.open需要的url *data:存放window.open需要傳遞的引數,這裡存放的是陣列 *name:可傳遞設定窗體屬性的引數等 *注:以上引數可以根據需要改變,當前的方式只是例子 */ function openPostWindow(url, data, name){ var categoryid = data[0]; var reportId =data[1]; //首先建立一個form表單 var tempForm = document.createElement("form"); tempForm.id="tempForm1"; //制定傳送請求的方式為post tempForm.method="post"; //此為window.open的url,通過表單的action來實現 tempForm.action=url; //利用表單的target屬性來繫結window.open的一些引數(如設定窗體屬性的引數等) tempForm.target=name; //建立input標籤,用來設定引數 var hideInput = document.createElement("input"); hideInput.type="hidden"; hideInput.name= "categoryid"; hideInput.value= categoryid; //將input表單放到form表單裡 tempForm.appendChild(hideInput); var hideInput2 = document.createElement("input"); hideInput2.type = "hidden"; hideInput2.name = "reportId"; hideInput2.value = reportId; tempForm.appendChild(hideInput2); //此為給form表單繫結事件(onsubmit),由於存在瀏覽器相容問題所以此處加了一個判斷。 //但實質都是為form表單繫結一個提交事件,以便之後觸發實現window.open效果 if(document.all){ tempForm.attachEvent("onsubmit",function(){}); //IE }else{ var subObj = tempForm.addEventListener("submit",function(){},false); //firefox } //將此form表單新增到頁面主體body中 document.body.appendChild(tempForm); //然後觸發onsubmit事件時執行openWindow(name)函式。因為有特定瀏覽器會開啟一個空白頁面所以這裡的function(甚至整個if)可以根據情況省略,經試驗這不會影響模擬window.open的效果。 if(document.all){ tempForm.fireEvent("onsubmit",function(){ openWindow(name); }); }else{ //tempForm.dispatchEvent(new Event("submit")); $("form").trigger("onsubmit",function(){ openWindow(name); }); } //手動觸發,提交表單 tempForm.submit(); //從body中移除form表單 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'); }<span style="font-family: Arial, Helvetica, sans-serif;"> </span>
這篇日誌說是原創但其實算是總結,很多前輩都寫過類似的文章。希望看到的各位不要較真。關於程式碼有其他意見的歡迎留言。