使用 iframe 来呈现 HTML

什么是 iframe

iframe 是 HTML 中一种非常有用的元素，它可以用来在一个 HTML 文档中嵌入另一个 HTML 文档。在嵌入的 HTML 文档中可以包含任意的 HTML、CSS 和 JavaScript 代码，并且这些代码会在父 HTML 文档中被执行和渲染。

如何使用 iframe

要在 HTML 文档中使用 iframe，只需要在代码中添加一个 iframe 元素，并指定它要嵌入的 HTML 文档的 URL，如下所示：

<iframe src="http://example.com"></iframe>

上面的代码将在 HTML 文档中嵌入一个来自 http://example.com 这个 URL 的 HTML 文档。

除了 src 属性以外，iframe 元素还有许多其他的属性可以使用，例如 width 和 height 属性可以指定 iframe 元素的宽度和高度，sandbox 属性可以用来限制 iframe 中的内容不被父文档访问，等等。

如何与父文档进行通信

由于 iframe 中的内容与父文档是相互独立的，因此在某些情况下可能需要使用 JavaScript 等方式来实现 iframe 和父文档之间的通信。

一个常用的方式是在 iframe 中嵌入一个名为 postMessage 的 API，该 API 可以用来发送消息到父文档或从父文档接收消息。例如，在 iframe 中使用以下 JavaScript 代码可以向父文档发送一个消息：

window.parent.postMessage('Hello from iframe!', '*');

在父文档中可以使用以下代码监听来自 iframe 的消息：

window.addEventListener('message', function(event) {
  console.log('Received message from iframe: ' + event.data);
});

这样，当 iframe 中的 JavaScript 代码调用 postMessage 发送消息时，就会触发父文档中的 message 事件，并将消息作为事件对象的 data 属性传递过来。

总结

使用 iframe 可以很方便地在一个 HTML 文档中嵌入另一个 HTML 文档，并且在这两个文档之间可以使用 JavaScript 等方式进行通信。如果你在开发 Web 应用的过程中需要嵌入其他页面或组件，那么 iframe 是一个值得考虑的选择。