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 неверен, на спецификации ,

[...], если для элемента не указан атрибут src, а пользовательский агент обрабатывает атрибуты iframe для«первый раз»

Поставить в очередь задачу для выполнения шагов события загрузки iframe .
Источником задачи для этой задачи является источник задачи управления DOM.

Таким образом, им следует дождаться завершения текущего цикла событий, прежде чем вызывать эти шаги события загрузки iframe , которые отвечают за генерацию документа iframe.

В тот момент, когда вы вызвали iframe.contentDocument getter, он должен был вернуть null.

Но действительно, как автору, вам следует дождаться события onload, которое всегда должно запускаться асинхронно.