检测 iframe 内容更改 JavaScript

在 Web 开发中，我们通常需要通过 iframe 将其他网页嵌入到我们的页面中。当嵌入的网页内容被更改时，我们也需要相应地更新我们的页面内容。这时，我们需要检测 iframe 内容的更改，以便及时进行更新。本文将介绍如何使用 JavaScript 检测 iframe 内容的更改。

iframe 的基本使用

在 HTML 中，我们可以使用 <iframe> 标签来创建一个内嵌的窗口，以显示其他网页的内容。示例如下：

<iframe src="http://www.example.com"></iframe>

在这个示例中，我们创建了一个 iframe，并将其指向了 http://www.example.com 网页。

我们也可以使用 JavaScript 动态地创建 iframe，示例如下：

const iframe = document.createElement('iframe');
iframe.src = 'http://www.example.com';
document.body.appendChild(iframe);

这段代码在页面中动态地创建了一个 iframe，并将其指向了 http://www.example.com 网页。

监听 iframe 内容的更改

要检测 iframe 内容的更改，我们需要监听 onload 事件和 MutationObserver。onload 事件会在 iframe 中加载的页面完全加载后触发，而 MutationObserver 则可以检测 DOM 中的变化。

首先，我们需要监听 onload 事件，并将其绑定到 iframe 的 contentWindow 上。contentWindow 属性是 iframe 内嵌页面的全局对象。

const iframe = document.createElement('iframe');
iframe.src = 'http://www.example.com';

iframe.contentWindow.addEventListener('load', () => {
  console.log('iframe load');
});
document.body.appendChild(iframe);

这段代码会在 iframe 中加载的页面完全加载后，在控制台输出 iframe load。

然后，我们需要创建一个 MutationObserver 对象，并使用它监测 iframe 中的 DOM 变化。当 iframe 中的 DOM 发生变化时，MutationObserver 会触发回调函数，并传递一个 MutationRecord 对象，其中包含了有关 DOM 变化的信息。

const iframe = document.createElement('iframe');
iframe.src = 'http://www.example.com';

iframe.contentWindow.addEventListener('load', () => {
  const observer = new MutationObserver(records => {
    console.log(records);
  });
  observer.observe(iframe.contentDocument.documentElement, { childList: true, subtree: true });
});

document.body.appendChild(iframe);

这段代码会在 iframe 中加载的页面完全加载后，创建一个 MutationObserver 对象，并监测 iframe 中的 DOM 变化。当 iframe 中的 DOM 发生变化时，在控制台输出 MutationRecord 对象。

完整代码

下面是完整的检测 iframe 内容更改的 JavaScript 代码：

const iframe = document.createElement('iframe');
iframe.src = 'http://www.example.com';

iframe.contentWindow.addEventListener('load', () => {
  const observer = new MutationObserver(records => {
    console.log(records);
    // TODO: 更新页面内容
  });
  observer.observe(iframe.contentDocument.documentElement, { childList: true, subtree: true });
});

document.body.appendChild(iframe);

在实际应用中，我们需要根据业务逻辑，将 TODO 中的代码替换为相应的更新页面内容的逻辑。

总结

在本文中，我们介绍了如何使用 JavaScript 检测 iframe 内容的更改。通过监听 onload 事件和 MutationObserver，我们可以实时监测 iframe 中的变化，并相应地更新页面内容。这对于一些需要显示外部网站内容的 Web 应用非常有用。