在前端开发中，我们经常需要使用 iframe 元素来嵌入外部网页或者展示本地页面等。本文将介绍如何使用 JavaScript 动态地设置 iframe 的内容。
1. 获取 iframe 元素
首先，我们需要通过 JavaScript 获取到要设置内容的 iframe 元素。可以使用 document.getElementById() 方法或者其他选择器方法来获取元素的引用。例如：
<iframe id="my-iframe" src=""></iframe>
// 获取 iframe 元素
const iframe = document.getElementById('my-iframe');2. 设置 iframe 内容
有两种方式可以设置 iframe 的内容：一种是直接设置 src 属性，另一种是使用 contentWindow.document.write() 方法动态写入内容。
2.1 直接设置 src 属性
直接设置 src 属性可以让 iframe 加载指定的网页。例如：
iframe.src = 'https://www.example.com';
这种方式适用于需要加载外部网页的情况。
2.2 使用 contentWindow.document.write()
使用 contentWindow.document.write() 方法可以动态地向 iframe 中写入 HTML 内容。例如：
iframe.contentWindow.document.write('<h1>Hello, world!</h1>');这种方式适用于需要显示本地生成的 HTML 内容的情况。需要注意的是，如果在 iframe 已经加载完毕后再使用该方法写入内容，会覆盖原有内容。
3. 示例代码
下面是一个完整的示例，演示如何在 iframe 中动态设置内容：
-- -------------------- ---- -------
--------- -----
------
------
---------- ------- -- --------------
-------
------
------- ---------------------------- -------- -------------
------- ---------------------------- ----- ----------------
------- -------------- ----------------
--------
----- ------ - -------------------------------------
----- ---------------------- - ----------------------------------------------
----- ---------------------- - ----------------------------------------------
-- ------
------------------------------------------------ -- -- -
---------- - --------------------------
---
-- ------
------------------------------------------------ -- -- -
----------------------------------------------- --------------
---
---------
-------
-------该示例中包含了两个按钮，分别用于加载外部网页和本地内容。点击按钮后会动态地设置 iframe 的内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29333