window.open以post方式提交

11年前

各浏览器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方法里那种可设置窗体属性的参数又不能 用。最后想办法整了这么一个两者结合的方式，将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');    

 

}   

 

第二种方式

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; 

}