IFRAME元素是一种内嵌网页的HTML标签。使用JavaScript，我们可以轻松地访问和控制IFRAME元素中的内容。本文将介绍如何使用JavaScript来访问和操纵IFRAME元素。
访问IFRAME元素
首先，我们需要获取IFRAME元素。我们可以通过以下代码来获取IFRAME元素：
var iframe = document.getElementById("my-iframe");在上面的代码中，“my-iframe”是IFRAME元素的ID。我们可以在HTML中定义一个IFRAME元素，并为其指定ID：
<iframe id="my-iframe" src="https://example.com"></iframe>
一旦我们获取了IFRAME元素，就可以使用它来访问元素的属性和方法。下面是一些常见的IFRAME元素属性和方法：
属性
contentDocument：获取IFRAME元素的文档对象。contentWindow：获取IFRAME元素的窗口对象。src：获取或设置IFRAME元素的URL地址。
方法
focus()：使IFRAME元素获得焦点。blur()：使IFRAME元素失去焦点。
操作IFRAME元素
一旦我们获取了IFRAME元素，我们可以对其进行操作。下面是一些常见的IFRAME元素操作：
获取IFRAME元素的文档对象
要获取IFRAME元素的文档对象，我们可以使用contentDocument属性。例如，我们可以使用以下代码来获取IFRAME元素的标题：
var iframe = document.getElementById("my-iframe");
var title = iframe.contentDocument.title;获取IFRAME元素的窗口对象
要获取IFRAME元素的窗口对象，我们可以使用contentWindow属性。例如，我们可以使用以下代码来向IFRAME元素发送消息：
var iframe = document.getElementById("my-iframe");
var win = iframe.contentWindow;
win.postMessage("Hello from parent window!", "https://example.com");加载新的页面
要加载一个新的页面，我们可以使用src属性。例如，我们可以使用以下代码来加载一个新的页面：
var iframe = document.getElementById("my-iframe");
iframe.src = "https://example.com/new-page.html";示例代码
下面是一个完整的示例代码，演示了如何使用JavaScript访问和操作IFRAME元素：
-- -------------------- ---- -------
--------- -----
------
------
------------- ------------
-------
------
---------- -----------
------- ---------------------------- --- -------------
----
------- -------------- -----------------------------------
--------
-------- ------------- -
--- ------ - -------------------------------------
---------- - ------------------------------------
-
---------------------------------- --------------- -------
-------- --------------------- -
-- ------------- --- ---------------------- -------
------------------- -------- -------- - - ------------
-
---------
-------
-------上面的代码显示一个包含IFRAME元素和一个按钮的页面。当用户点击按钮时，页面将加载一个新的页面。此外，页面还通过window.addEventListener("message", receiveMessage, false)监听消息事件，并在收到消息时调用receiveMessage(event)函数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15600