使用来自 JavaScript 的动态内容填充 IFRAME答案

【问题标题】：Filling an IFRAME with dynamic content from JavaScript使用来自 JavaScript 的动态内容填充 IFRAME
【发布时间】：2011-02-09 14:15:06
【问题描述】：

我有一个 IFRAME，应该填充来自 JavaScript 的内容。如果内容在服务器上，我所要做的就是：

    function onIFrameFill() {
         myIframe.location.href = "HelloWorld.html";
     }

但是我拥有的内容是在客户端生成的HTML页面并表示为字符串（我对它没有太大影响）。如何以编程方式填充 iframe 的内容？

【问题讨论】：

【解决方案1】：

我认为您正在寻找类似的东西：

var iframeDoc = myIframe.contentWindow.document;
iframeDoc.open();
iframeDoc.write('hello world');
iframeDoc.close();

【讨论】：

对于 Chrome 版本 41.0.2272.76 m 中的我，如果您不先 open() iframeDoc，那么它将追加文本；如果你 open() 它会清除 iframeDoc 并覆盖文本。您可以编写('bold')，HTML 将被解释为标签。
Chrome 抱怨 document.write() 怎么样？【违规】避免使用document.write()。 developers.google.com/web/updates/2016/08/… 这似乎是一个合法的用途，因为我没有注入脚本。控制台中不出现“违规”仍然会很好
@BrianK 出于性能原因，不建议使用 document.write()。我相信我给出了这个答案，因为它最直接地解决了 OP 的问题。最好将 iframe.contentWindow.location.href 设置为一个页面，然后让该页面进行 DOM 更改。

【解决方案2】：

尝试设置 .innerHTML 但这不起作用。 Jeffery To 的解决方案有效。只是想补充一点， myIframe.contentWindow 可能无法在旧浏览器中运行（阅读 IE 旧版本），所以你可以这样做

var iFrameWindow = myIframe.contentWindow || myIframe.documentWindow;
var iFrameDoc = iFrameWindow.document;

然后使用上面的文档 open(), write() & close()。

【讨论】：

【解决方案3】：

.innerHTML 呢？

myIframe.innerHTML = "This is some HTML <b>text</b>";

【讨论】：

【解决方案4】：

与 Jeffry 类似，但改用 contentDocument。

let iframe = document.querySelector('iframe');
let doc = iframe.contentDocument;
doc.open();
doc.write('Hello world!');
doc.close();

【讨论】：

您现在可以在 iframe 上使用一个新属性，即 srcDoc，而不是 document.write()。 caniuse.com/iframe-srcdoc