iFrame 是 HTML 中的一个标签，可以在当前网页内嵌入另一个网页。很多时候我们需要在 iFrame 中插入一些动态生成的内容，本文将介绍如何在 iFrame 中插入内容。
1. 获取 iFrame 对象
在 JavaScript 中，我们可以通过 document.getElementById 或 window.frames 属性获取到 iFrame 的 DOM 对象。例如：
----- ------ - -------------------------------------
2. 获取 iFrame 的 window 对象
为了在 iFrame 中插入内容，我们需要先获取 iFrame 的 contentWindow 属性，该属性返回 iFrame 的 window 对象。例如：
----- ------------ - ---------------------
3. 使用 iFrame 的 window 对象操作内容
获取到 iFrame 的 window 对象后，我们就可以使用 JavaScript 操作 iFrame 内容了。例如，我们可以向 iFrame 中插入一个段落：
----- - - ----------------------------------------- ----- ---- - -------------------------------------------- --------- -------------------- ------------------------------------------
上面的代码首先创建了一个 p 元素和一个文本节点，然后将文本节点添加到 p 元素中，最后将 p 元素添加到 iFrame 的 body 元素中。
4. 注意事项
在使用 iFrame 插入内容时，需要注意以下几点：
- iFrame 必须与当前网页同源（即协议、域名、端口号完全相同），否则会受到浏览器的安全限制。
- iFrame 中的内容必须能够被 JavaScript 访问，否则无法操作。
- 在 iFrame 加载完成之前，我们不能对其进行操作。
5. 示例代码
以下是一个完整的示例代码，通过该代码可以向 iFrame 中插入一个表格：
--------- -----
------
------
----- ----------------
------------- ------- ---- --------------
-------
------
------- -------------- ---------------------------
--------
----- ------ - -------------------------------------
----- ------------ - ---------------------
------------- - ---------- -
----- ----- - ---------------------------------------------
----- ----- - ---------------------------------------------
--- ---- - - -- - - -- ---- -
----- -- - ------------------------------------------
--- ---- - - -- - - -- ---- -
----- -- - ------------------------------------------
----- ---- - -------------------------------------- - --- - ---
---------------------
-------------------
-
----------------------
-
-------------------------
----------------------------------------------
--
---------- - ------------------------
---------
-------
-------上面的代码创建了一个空的 iFrame，并在 iFrame 加载完成后向其中插入了一个包含数字的表格。需要注意的是，为了避免浏览器的安全限制，我们在代码中先将 iFrame 的 src 属性设置为 about:blank，等 iFrame 加载完成后再设置正确的 src 属性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30998