创建新的iframe和同步加载内容。
目标是动态和同步地创建一个iframe，并将SVG元素附加到它的文档主体中。
我们正在努力让它在Firefox中运行。
我们的研究建议Firefox在将iframes附加到HTML后用新文档重新设置iframes。这将触发一个load事件，并且只有在此事件之后才能成功地添加内容。加载事件之前附加的任何内容都将被丢弃。
解决方法并不理想，就是等待load事件，然后将SVG元素附加到iframe。
是否有可能避免异步行为？我们希望在创建iframe之后同步地追加SVG元素。
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>
回答 1
Stack Overflow用户
发布于 2019-05-20 14:48:19
tl：博士--不管是怎么做的--加载iframe的异步特性似乎是不可避免的，但是有一种同步的方法可以通过srcdoc动态地向iframe添加内容，而srcdoc“重写”默认的iframe src属性。
使用createHTMLDocument也可能有一个解决方案，但我还没有成功。
使用srcdoc的解决方案
解释
假设您的动态iframes不通过src属性加载内容
当一个iframe元素插入到具有浏览上下文的文档中时，用户代理必须创建一个嵌套的浏览上下文，然后“第一次”处理iframe属性。
要注意的是“第一次处理iframe属性”。没有提到是同步的还是异步的，这取决于每个浏览器的实现。
如前所述，Chrome和Firefox已经将此过程理解为异步的，因为iframe的目标是从其src属性加载内容并调用onload回调。
如果没有可用的src属性，它将将其设置为"about:blank"
值得一提的是，在浏览器检查是否存在src属性之前，它将首先检查srcdoc是否可用，根据MDN iframe doc
中科院 内联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>的内容。
https://stackoverflow.com/questions/56195634
复制相似问题
腾讯云开发者
