Создавайте новый iframe и загружайте контент синхронно

Question

Цель состоит в том, чтобы динамически и синхронно создать iframe и добавить элемент SVG в его тело документа.

Мы пытаемся заставить это работать в Firefox.

Наше исследование показывает, что Firefox сбрасываетiframes с новым документом после добавления iframes в HTML.Это инициирует событие загрузки, и только после этого события вы можете успешно добавлять контент.Любое содержимое, добавляемое до события загрузки, удаляется.

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

Возможно ли этоизбежать асинхронного поведения?Мы хотим добавить элемент SVG синхронно после создания iframe.

Codepen: https://codepen.io/anon/pen/yWXjgM

var newElem = $(document.createElement("div"));
newElem.html("hi there");
var iframe = $(document.createElement("iframe"));
iframe.contents().find("body").append(newElem);
$("#box").append(iframe);
$("#box").append(newElem);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box"></div>

Answer 1

tl: dr Независимо от того, что сделано, асинхронный характер загружаемого iframe не выглядит как невозможным , однако существует синхронный способ динамического добавления контента в iframe через srcdoc, который "переопределяет" используемый по умолчанию атрибут iframe src.

Может показаться, что может быть решением с использованием createHTMLDocument , но я пока не добился успеха.

Решение с srcdoc

Объяснение

при условии, что ваши динамические iframes не загружают контент через атрибут src

В соответствии с HTML iframe спецификациями

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

Следует обратить внимание на то, что «обрабатывать атрибуты iframe в первый раз». нет упоминания о том, является ли этот процесс синхронным или асинхронным и зависит от реализации каждого браузера.

Как уже упоминалось, Chrome и Firefox понимают этот процесс как асинхронный, что имеет смысл, поскольку целью iframe является загрузка содержимого из его атрибута src и вызов обратного вызова onload.

Если атрибут src недоступен, он будет установлен на "about:blank"

Стоит отметить, что прежде чем браузер проверит, существует ли атрибут src, он сначала проверит, доступен ли srcdoc, что соответствует MDN iframe doc :

srcdoc

Встроенный HTML для встраивания, переопределяющий атрибут src. Если браузер не поддерживает атрибут srcdoc, он вернется к URL-адресу в атрибуте src.

Рабочий пример

const container = document.getElementById("container");
const iframe = document.createElement("iframe");

iframe.addEventListener("load", function(){
  console.log("loaded...");
});

iframe.srcdoc = `
  <svg height="100" width="100">
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
      Sorry, your browser does not support inline SVG.  
  </svg>
`;

iframe.srcdoc += `
  <svg height="100" width="100">
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" />
      Sorry, your browser does not support inline SVG.  
  </svg>
`

container.append(iframe);

<div id="container"></div>

Решение с веб-расширениями

Если вы разрабатываете веб-расширение, у вас будет доступ к mozbrowser api и, таким образом, stop

Метод stop () интерфейса HTMLIFrameElement используется для остановки загрузки содержимого <iframe>.