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

少叙闲言

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

问题：

    <button id="btn">submit</button>
    <iframe id="expert_form" src="expert_form.html"></iframe>
    <script>
        document.getElementById("btn").onclick = function () {
            var iframeObj = document.getElementById("expert_form");
            var formObj = iframeObj.contentWindow.document.forms[0];
            formObj.submit();
            //-----------------------------------------------分割线
            iframeObj.parentNode.removeChild(iframeObj);
            var newiframe = document.createElement("iframe");
            newiframe.id = "expert_form";
            newiframe.src = "expert_form.html";
            document.body.appendChild(newiframe)
        }
    </script>

点击按钮后：

IE7、8、9:

 

 

 

FF：

 

chrome：

 

解析问题：

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

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

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

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

解决问题：

 document.getElementById("btn").onclick = function () {
            var iframeObj = document.getElementById("expert_form");
            var formObj = iframeObj.contentWindow.document.forms[0];
            formObj.submit();
            //-----------------------------------------------分割线 
            setTimeout(function () {
                iframeObj.parentNode.removeChild(iframeObj);
                var newiframe = document.createElement("iframe");
                newiframe.id = "expert_form";
                newiframe.src = "expert_form.html";
                document.body.appendChild(newiframe)
            }, 300)
        }

 

chrome：

 

FF：