【一天一道兼容性】之——IE、FF、Chrome下的表单重定向的挂起

少叙闲言

利用隐藏域提交表单是大家常用的办法，但是如果这个表单是post方法，而且主页面下想反复的提交这个表单，就需要在提交后更新隐藏域的src，也就是在你提交后，删除此节点，然后再重新添加进来，但是这一过程，不同浏览器会处理的不同

问题：

    <button id="btn">submit</button> 2     <iframe id="expert_form" src="expert_form.html"></iframe> 3     <script> 4         document.getElementById("btn").onclick = function () { 5             var iframeObj = document.getElementById("expert_form"); 6             var formObj = iframeObj.contentWindow.document.forms[0]; 7             formObj.submit(); 8             //-----------------------------------------------分割线 9             iframeObj.parentNode.removeChild(iframeObj);10             var newiframe = document.createElement("iframe");11             newiframe.id = "expert_form";12             newiframe.src = "expert_form.html";13             document.body.appendChild(newiframe)14         }15     </script>

点击按钮后：

IE7、8、9:

 

 

 

FF：

 

chrome：

 

解析问题：

可以看到，当提交后执行重置隐藏域时候，chrome和FF并没有执行提交，而是“貌似”直接略过了。

主要问题出现在浏览器对此处的解析不同：

IE在提交表单后，浏览器处于挂起的状态，直到提交成功后返回，然后JS继续向下执行；

而Chrome和FF都是把提交当成异步处理了，也就是在提交后，JS会仍然向下执行，在截图里可以发现10~30ms内足够JS在他提交之前就把它删了。

解决问题：

 document.getElementById("btn").onclick = function () { 2             var iframeObj = document.getElementById("expert_form"); 3             var formObj = iframeObj.contentWindow.document.forms[0]; 4             formObj.submit(); 5             //-----------------------------------------------分割线  6             setTimeout(function () { 7                 iframeObj.parentNode.removeChild(iframeObj); 8                 var newiframe = document.createElement("iframe"); 9                 newiframe.id = "expert_form";10                 newiframe.src = "expert_form.html";11                 document.body.appendChild(newiframe)12             }, 300)13         }

 

chrome：

 

FF：