如何使用 JavaScript 获取 iFrame 的 HTML 内容

iFrame 是一种内嵌网页的标签，常用于嵌入其他网站的内容，或者在同一网页中展示不同的内容。在 Web 开发中，我们有时需要获取 iFrame 中的 HTML 内容，以便进行后续的操作。本文将介绍如何使用 JavaScript 获取 iFrame 的 HTML 内容。

方法一：使用 contentDocument 属性

iFrame 标签有一个 contentDocument 属性，可以返回 iFrame 中的 document 对象。因此，我们可以通过 contentDocument.body.innerHTML 获取 iFrame 中的 HTML 内容。

const iframe = document.getElementById('my-iframe');
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
const iframeHtml = iframeDoc.body.innerHTML;
console.log(iframeHtml);

上面的代码中，首先获取 id 为 'my-iframe' 的 iFrame 元素。然后通过 contentDocument 属性获取 iFrame 中的 document 对象，使用 || 运算符判断不同浏览器的兼容性。最后通过 iframeDoc.body.innerHTML 获取 iFrame 中的 HTML 内容，并将其输出到控制台。

方法二：使用 postMessage 方法

postMessage 是一种可以在跨域页面之间传递消息的方法。我们可以在 iFrame 中编写 JavaScript 代码，通过 postMessage 方法将 iFrame 中的 HTML 内容传递到父页面中。

首先，在 iFrame 中编写以下代码：

const iframeHtml = document.body.innerHTML;
parent.postMessage(iframeHtml, '*');

上面的代码中，通过 document.body.innerHTML 获取 iFrame 中的 HTML 内容，然后通过 postMessage 方法将其传递到父页面中。

在父页面中，编写以下代码：

window.addEventListener('message', (event) => {
    if (event.origin !== 'http://example.com') return;
    console.log(event.data);
});

上面的代码中，通过 window.addEventListener 监听 message 事件，获取 event.data 中的 HTML 内容。event.origin 是指发送消息的页面来源，可以在代码中限制消息只能来自特定的页面。

方法三：使用 jQuery 库

如果您在项目中使用了 jQuery 库，可以使用以下代码获取 iFrame 中的 HTML 内容：

const iframeHtml = $('#my-iframe').contents().find('body').html();
console.log(iframeHtml);

上面的代码中，首先使用 $ 符号选中 id 为 'my-iframe' 的 iFrame 元素，并使用 .contents() 方法获取 iFrame 中的 document 对象。然后使用 .find() 方法选中 iFrame 中的 元素，最后使用 .html() 方法获取 iFrame 中的 HTML 内容。

总结一下，无论是使用 contentDocument 属性、postMessage 方法还是 jQuery 库，都可以轻松获取 iFrame 中的 HTML 内容，方便进行后续的操作。