window.open以post方式提交

lishoubin 11年前發布 | 1K 次閱讀 網頁開發 viewport Evince

各瀏覽器HTTP Get請求URL最大長度并不相同,幾類常用瀏覽器最大長度及超過最大長度后提交情況如下:

IE6.0                :url最大長度2083個字符,超過最大長度后無法提交。
IE7.0                :url
最大長度2083個字符,超過最大長度后仍然能提交,但是只能傳過去2083個字符。
firefox 3.0.3     :url
最大長度7764個字符,超過最大長度后無法提交。
Opera 9.52       :url
最大長度7648個字符,超過最大長度后無法提交。
Google Chrome 2.0.168   :url
最大長度7713個字符,超過最大長度后無法提交

 

 

 

第一種方式

   最近在做web項目,碰到需要跨頁面傳遞參數的功能,就是那種需要把當前頁面的內容帶到新開的子窗體中,以前的做法是傳一個id過去,然后在新窗口中去讀 數據庫的內容。雖然不怎么麻煩,但是如果內容么有在數據庫里保存,僅僅是處以擬稿狀態時,就不能實現了,用戶還常常認為是個bug。考慮采用get的方式 傳遞,把需要的內容都序列化然后,通過url去傳,顯得很臃腫,而且get的傳遞內容長度有限制。于是就想到用post的方式傳遞,問題在于open方法 不能設置請求方式,一般網頁的post都是通過form來實現的。如果僅僅模擬form的提交方式,那么open方法里那種可設置窗體屬性的參數又不能 用。最后想辦法整了這么一個兩者結合的方式,將formtarget設置成和openname參數一樣的值,通過瀏覽器自動識別實現了將內容post 到新窗口中。
   
比較有意思的是直接通過調用formsubmit方法不能觸發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');    

 

}   

 

第二種方式

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; 

}

 本文由用戶 lishoubin 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!