在 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