在 Web 开发中，iframe 是一种非常有用的技术，它允许您将一个网页嵌套在另一个网页中。通过 JavaScript，您可以在 iframe 中动态地添加、修改或删除内容。
创建一个简单的 iframe
要创建一个简单的 iframe，您需要使用以下 HTML 代码：
-- -------------------- ---- ------- --------- ----- ------ ------ -------------- ---- ---- -- ------ ----- ------------------ ------- ------ -------- ----------------------- ------- -------
这个 HTML 代码会创建一个空白的 iframe，但是它并没有任何内容。您可以使用 JavaScript 来向 iframe 中插入 HTML 内容。
向 iframe 中插入 HTML 内容
要向 iframe 中插入 HTML 内容，您需要执行以下步骤：
- 获取 iframe 的 DOM 对象。
- 使用
contentDocument属性获取 iframe 内部文档的 DOM 对象。 - 使用
write()方法写入 HTML 内容。
以下是一个示例代码，演示如何将一个段落插入到 iframe 中：
-- -------------------- ---- ------- --------- ----- ------ ------ -------------- ---- ---- -- ------ ----- ------------------ ------- ------ -------- ----------------------- --------- ------- ------ - ------------------------------------ ------- -------------- - ----------------------- -- -------------------------------- ------------- ---------- ------- -------
在这个示例代码中，我们首先获取 iframe 的 DOM 对象，并使用 contentDocument 属性获取其内部文档的 DOM 对象。然后，我们使用 write() 方法写入一个段落，其中包含“Hello World!”的文本。当您在浏览器中打开这个 HTML 文件时，您将看到 iframe 中显示了“Hello World!”。
将动态内容插入到 iframe 中
通过 JavaScript，您可以动态地向 iframe 中添加、修改或删除内容。以下是一个示例代码，演示如何在 iframe 中动态地创建一个表格：
-- -------------------- ---- ------- --------- ----- ------ ------ -------------- ---- ---- -- ------ ----- ------------------ ------- ------ -------- ----------------------- --------- ------- ------ - ------------------------------------ ------- -------------- - ----------------------- ---- ------ ------- ----- - -------------------------------------- ---- ------- ------- --------- - ----------------------------------- ------- ---------- - ----------------------------------- ------------------------ - ------- ------- ---------- - ----------------------------------- ------------------------ - ------ -- ------------------------------------ ------------------------------------ ------------------------------- ---- ------- ------- -------- - ----------------------------------- ------- ------------ - ----------------------------------- -------------------------- - ------- ------- ------------ - ----------------------------------- -------------------------- - ----- ------------------------------------- ------------------------------------- ------------------------------ ------- -------- - ----------------------------------- ------- ------------ - ----------------------------------- -------------------------- - ------- ------- ------------ - ----------------------------------- -------------------------- - ----- ------------------------------------- ------------------------------------- ------------------------------ ----------------------------------------- ---------- ------- -------
在这个示例代码中，我们首先创建一个 table 元素。然后，我们创建一个表头行和列，并将其添加到 table 中。接下来，我们创建两个数据行和列，并将它们添加到 table 中。最后，我们将整个 table 添加到 iframe 的 body 元素中。
结论
通过 JavaScript，在 iframe 中
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28028