1. 程式人生 > >2016/10/24 window.open隱藏引數、引數過長、中文編碼問題

2016/10/24 window.open隱藏引數、引數過長、中文編碼問題

一般 window.open 傳引數都是用Get.方式,在url後面拼接引數。
但這樣有時候並不適用,如: 
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>

這篇日誌說是原創但其實算是總結,很多前輩都寫過類似的文章。希望看到的各位不要較真。關於程式碼有其他意見的歡迎留言。