Chrome 同步处理 iframe 加载，而 Firefox 异步处理

Question

以下有问题的代码会导致 Chrome 和 Firefox 之间出现差异：

<button id="add">add element</button>
<div id="container"></div>
<script>
  const c = document.querySelector("#container");
  document.querySelector("#add").onclick = function() {
    const iframe = document.createElement("iframe");
    c.appendChild(iframe);

    const h1 = document.createElement("h1");
    h1.innerText = "hello";

    iframe.contentDocument.body.appendChild(h1);
  };
</script>

JSFiddle：https://jsfiddle.net/vtbcu1zj/

尝试在 Chrome 中运行上述代码（应该可以正常运行），也可以在 Firefox 中运行（中断）。

这似乎是因为 Firefox 不会假设 iframe 会立即加载，而 Chrome 会。以下更改使代码在两种浏览器中都能正常工作：

iframe.onload = function () {
  iframe.contentDocument.body.appendChild(h1);
}

c.appendChild(iframe); // append after setting up event listener

造成这种差异的原因是什么？这是错误还是功能？ Chrome 在这里做出了错误的假设还是 Firefox 处理不正确？

Answer 1

Chrome 错了，per specs，

[...] 如果元素没有指定 src 属性，并且用户代理正在“第一次”处理 iframe 的属性

  排队任务以运行iframe load event steps。
该任务的任务源是DOM操作任务源。

所以他们实际上应该等待当前事件循环完成，然后再调用这些负责生成 iframe 文档的 iframe 加载事件步骤。

在您调用iframe.contentDocument getter 时，它应该返回了null。

但实际上，作为作者，您应该等待onload 事件，该事件应该始终异步触发。