Chrome 31 的一个 Bug（已修复）

update @ 2013-11-15 22:30，Chrome 稳定版已升级到 31.0.1650.57，经验证，本文提到的 Bug 已修复。

本文提到的 Bug，是由我同事发现的，在 Chrome 正式版（31.0.1650.48）可以稳定复现，Chrome 30 和其它浏览器都没问题。大家在测试本文示例时请留意版本号，如果有和本文描述不一致的地方请给我留言。

触发条件

经过分析，如果在 Chrome 31 里用 JavaScript 立即提交表单到 iframe 中（无论 get 还是 post），都会导致后续代码停止渲染。

简单示例如下（外链地址）：

text1


    <iframe name="ifr"></iframe>

    <form action="https://imququ.com" id="form" target="ifr"></form>
    <script>
        document.getElementById("form").submit();
    </script>

    text2

    <img src="https://st.imququ.com/static/uploads/2011/07/ququ_1_1_1.jpg" />

    <script>
    setTimeout(function() {
        alert(0);
    }, 0);
    </script>

以上代码，script 标签之后的代码都不会执行。

解决方案

这个问题，暂时可以通过万能的「setTimeout 0」来解决，即把提交表单的操作放在 setTimeout 里执行（外链地址）：

text1


    <iframe name="ifr"></iframe>

    <form action="https://imququ.com" id="form" target="ifr"></form>
    <script>
    setTimeout(function() {
        document.getElementById("form").submit();
    }, 0);
    </script>

    text2

    <img src="https://st.imququ.com/static/uploads/2011/07/ququ_1_1_1.jpg" />

    <script>
    setTimeout(function() {
        alert(0);
    }, 0);
    </script>

结论

这个问题还是比较严重的，我也会向社区反馈。大家有什么看法，欢迎留言讨论。

专题「浏览器」的其他文章 »

• iOS 10 Safari 视频播放新政策 (Oct 07, 2016)
• Chrome 中 scrollingElement 的变化 (Apr 16, 2016)
• 域名小知识：Public Suffix List (Nov 28, 2015)
• window.opener.location 安全风险讨论 (Oct 09, 2015)
• 使用 SRI 增强 localStorage 代码安全 (Sep 26, 2015)
• Subresource Integrity 介绍 (Sep 23, 2015)
• 移动 Web 与 JavaScript 定时器 (Mar 27, 2014)
• Chrome 和 Web Fonts 二三事 (Mar 24, 2014)
• Webkit 异步加载 CSS 的奇怪现象 (Dec 25, 2013)
• 小成本实现部分选中的复选框 (Dec 22, 2013)