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

少叙闲言

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

问题：

 1     <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在他提交之前就把它删了。

解决问题：

 1  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：

 

 

转载于:https://www.cnblogs.com/ccto/archive/2013/04/24/3040762.html