iframe 内容获取 - Javascript

在前端开发中，可能会遇到需要获取 iframe 中的内容的情况。通过 JavaScript 可以很方便地实现这个功能。

获取 iframe 内容

要获取 iframe 中的内容，首先需要获取到 iframe 的对象。可以通过以下方法获取：

const iframe = document.getElementById('myIframe');

其中，myIframe 是 iframe 元素的 id。

获取到 iframe 对象后，可以使用 contentWindow 属性来获取 iframe 中的 window 对象，然后使用 document 属性来获取 iframe 中的 HTML 内容。具体代码如下：

const iframe = document.getElementById('myIframe');
const iframeWindow = iframe.contentWindow;
const iframeDocument = iframeWindow.document;
const iframeContent = iframeDocument.documentElement.outerHTML;
console.log(iframeContent);

以上代码中，iframeContent 表示获取到的 iframe 内容。

跨域问题

需要注意的一点是，如果 iframe 和当前页面不在同一个域名下，那么上面的方法将会失败。这是因为浏览器出于安全考虑，禁止跨域操作。

解决方案是使用 postMessage 方法，它可以在不同域名下的窗口之间传递信息。具体做法是，在 iframe 中发出一个 postMessage 消息，在当前页面中监听消息，从而获取到 iframe 中的内容。以下是实现代码：

在 iframe 中发送消息：

const iframeWindow = window.parent;
iframeWindow.postMessage('getIframeContent', '*');

在当前页面中监听消息：

window.addEventListener('message', (event) => {
  if (event.data === 'getIframeContent') {
    const iframeDocument = document.getElementById('myIframe').contentWindow.document;
    const iframeContent = iframeDocument.documentElement.outerHTML;
    console.log(iframeContent);
  }
});

以上代码中，'*' 表示允许任何来源的消息。如果需要限制消息来源，可以将 '*' 替换为合法的域名。