介绍
在前端开发中，我们有时需要与嵌套的 iframe 元素交互。iframe 是一种 HTML 元素，它可以在当前页面中嵌入另一个网页。要与嵌套的 iframe 中的内容进行交互，我们需要获取 iframe 的 document 对象。
获取 document 对象
我们可以通过以下几种方式来获取 iframe 的 document 对象：
方法一：使用 iframe 的 contentWindow 属性
const iframe = document.getElementById('my-iframe');
const iframeDocument = iframe.contentWindow.document;这种方法是最常用的方法，我们首先获取 iframe 元素，然后使用 contentWindow 属性获取该元素所包含的窗口对象（即 iframe），然后使用 document 属性获取该窗口对象的文档对象。
方法二：使用 iframe 的 contentDocument 属性
const iframe = document.getElementById('my-iframe');
const iframeDocument = iframe.contentDocument;此方法直接访问与 iframe 关联的文档，而不是通过窗口对象间接访问。
方法三：使用 window.frames
const iframe = document.getElementById('my-iframe');
const iframeDocument = window.frames['my-iframe'].document;此方法需要传递 iframe 元素的 ID 或名称作为参数，并使用 window.frames 对象来访问 iframe 的文档对象。
示例
下面是一个简单的示例，演示如何从父级文档中获取嵌套 iframe 的文档对象：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ------ - -------- ----------
-------
------
------- -------------- ---------------------------------------
--------
----- ------ - -------------------------------------
----- -------------- - ------------------------------
----------------------------------
---------
-------
-------在这个示例中，我们首先在页面中嵌入了一个 iframe 元素，并为其设置了 ID。然后，在 JavaScript 中，我们使用方法一来获取 iframe 的 document 对象并输出其标题。
结论
获取嵌套的 iframe 的 document 对象是前端开发中的常见任务之一。我们可以使用 contentWindow 属性、contentDocument 属性或 window.frames 对象来访问该对象。在实际应用中，我们还需要考虑浏览器的安全限制和跨域问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26559