时间戳

首页 > 解决方案 > 创建新的 iframe 并同步加载内容

javascript - 创建新的 iframe 并同步加载内容

问题描述

目标是动态创建一个 iframe，并同步地将一个 SVG 元素附加到其文档正文中。

我们正试图让它在 Firefox 中工作。

我们的研究表明，Firefox 在将 iframe 附加到 HTML 后会使用新文档重置 iframe。这会触发一个加载事件，只有在此事件之后，您才能成功附加内容。在加载事件之前附加的任何内容都会被丢弃。

不理想的解决方法是等待加载事件，然后将 SVG 元素附加到 iframe。

是否可以避免异步行为？我们希望在创建 iframe 后同步附加 SVG 元素。

代码笔： 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>

标签： javascriptjqueryhtmlfirefoxiframe

解决方案

tl:dr无论做什么，加载的 iframe 的异步特性似乎都无法避免，但是有一种同步方式可以将内容动态添加到 iframe，通过srcdoc它“覆盖”默认 iframesrc属性不被使用。

似乎也有使用createHTMLDocument的解决方案，但我还没有成功。

解决方案srcdoc

解释

假设您的动态 iframe 不通过src属性加载内容

根据HTML iframe 规范

当 iframe 元素插入到具有浏览上下文的文档中时，用户代理必须创建嵌套的浏览上下文，然后“第一次”处理 iframe 属性。

需要注意的是“第一次处理 iframe 属性”。没有提到这个过程是同步的还是异步的，它归结为每个浏览器的实现。

正如已经提到的，Chrome 和 Firefox 已经将此过程理解为异步的，这确实有意义，因为 iframe 的目标是从其src属性加载内容并调用onload回调。

如果没有src可用的属性，它将设置为"about:blank"

值得一提的是，在浏览器检查是否存在某个src属性之前，它会首先检查srcdoc根据MDN iframe doc是否可用：

srcdoc

要嵌入的内联 HTML，覆盖 src 属性。如果浏览器不支持 srcdoc 属性，它将回退到 src 属性中的 URL。

工作示例

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>

使用 Web 扩展的解决方案

如果您正在开发 Web 扩展程序，您将可以访问mozbrowser api，因此stop

HTMLIFrameElement 接口的 stop() 方法用于停止加载<iframe>.

推荐阅读