建立动态 HTML IFRAME

简介

IFRAME 是一种 HTML 元素，允许在一个网页中嵌入另一个网页。它可以用来实现很多有趣的功能，比如加载外部内容和创建可重复使用的组件。

本文将介绍如何在前端代码中建立动态的 HTML IFRAME，以便于开发者更好地控制其行为和内容。

建立 IFRAME

首先，我们需要在 HTML 中添加一个 IFRAME 元素：

<iframe id="my-iframe"></iframe>

然后，在 JavaScript 中获取该元素并设置其属性：

const iframe = document.getElementById('my-iframe');
iframe.src = 'https://example.com';

这样就可以在 IFRAME 中加载指定的 URL 内容。

动态调整 IFRAME 大小

当 IFRAME 加载的内容发生变化时，我们可能需要调整其大小以适应新的内容。可以通过以下代码动态调整 IFRAME 的高度：

const iframe = document.getElementById('my-iframe');
iframe.addEventListener('load', () => {
  iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
});

在上述代码中，我们使用了 load 事件来监听 IFRAME 内容的加载完成事件。当内容加载完成后，我们获取内容页面的高度，并将 IFRAME 的高度设置为内容页面高度的值。

动态修改 IFRAME 内容

既然 IFRAME 可以嵌入其他网页，那么我们也可以通过 JavaScript 动态修改其内容。例如，我们可以在 IFRAME 中添加一个按钮，并通过点击按钮来修改 IFRAME 内容：

<iframe id="my-iframe"></iframe>
<button id="my-button">Click me</button>

const iframe = document.getElementById('my-iframe');
const button = document.getElementById('my-button');

button.addEventListener('click', () => {
  iframe.contentDocument.body.innerHTML = '<h1>Hello world!</h1>';
});

在上述代码中，我们获取了 IFRAME 和按钮元素，并监听了按钮的点击事件。当按钮被点击时，我们使用 contentDocument 属性获取到 IFRAME 的文档对象，并将其 HTML 内容设置为一个 h1 标签。

总结

本文介绍了如何在前端代码中建立动态的 HTML IFRAME，包括如何加载外部内容、动态调整大小和修改内容。IFRAME 可以帮助我们实现很多有趣的功能，希望读者能够从中学到一些有用的技巧。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10924