如何在 JS 中将 Html 内容添加到新创建的 Iframe

Question

我正在创建一个 Iframe 并尝试将 Html 添加到其主体中，但我不断收到错误无法读取 null 的属性主体。

我的代码看起来像这样：

var frameToPrint = document.createElement("IFRAME") as HTMLFrameElement;
frameToPrint.contentDocument.body.innerHTML = "";

如果我将 Iframe 添加到 HTML，然后使用 GetElementById 获取它，它会起作用，但我无法将此 Iframe 显示在我的页面上。即使隐藏起来，它也会弄乱我的尺寸。

提前谢谢您！

Answer 1

我找到了答案。您需要将新创建的框架附加到您的身体上。这会初始化 iframe 的 contentWindow 和 contentDocument。

var frameToPrint = document.createElement("iframe");
frameToPrint.setAttribute("name", "prnt");
document.body.appendChild(frameToPrint);

Answer 2

iframe 在创建时是一个空元素。它不知道它应该是（对你而言）一个 html 文档。因此它没有可以附加的主体。

下面我有一个片段作为例子。

---

1. 创建 iframe 元素：

   var iframe = document.createElement("iframe");

2. 创建主体元素：

   var body = document.createElement("body");

3. 创建要附加的内容： ex.:

   var body = document.createElement("body");

4. 用实际内容填写您的内容：

   content.textContent = "Some Text";

之后，您只需将其相应地附加到您的 iframe 元素

var iframe = document.createElement("iframe"); 
var body = document.createElement("body");
var content = document.createElement("p");
content.textContent = "Some Text";

body.appendChild(content);
iframe.appendChild(body);

console.log(iframe.innerHTML);