如何监听 iframe url 值的变化？

在开发Web应用时，监听iframe的URL变化是一个常见的需求，尤其是当你需要根据URL的变化来执行一些任务时。有几种方法可以实现这一功能，我将分别介绍它们：

1. 使用window.postMessage方法

这是一种安全并且被广泛推荐的方法来进行iframe之间的通信。当iframe的URL变化时，你可以在iframe内部的页面中使用postMessage方法向父页面发送消息。这种方式需要iframe的源代码可以被修改。

例子：

假设你控制iframe内的代码，你可以在URL变化后执行如下代码：

javascript
// 在iframe内部
window.parent.postMessage({
  type: 'URL_CHANGE',
  url: window.location.href
}, '*');

然后在父页面中监听这些消息：

javascript
// 在父页面
window.addEventListener('message', event => {
  if (event.data.type === 'URL_CHANGE') {
    console.log('新的URL:', event.data.url);
  }
});

2. 轮询检查src属性

如果你无法修改iframe内部的代码，另一个方法是在父页面中使用定时器定期检查iframe的src属性。这种方法比较简单，但可能不够高效。

例子：

javascript
let lastUrl = document.getElementById('myIframe').src;
setInterval(function() {
  let currentUrl = document.getElementById('myIframe').src;
  if (currentUrl !== lastUrl) {
    console.log('URL变化:', currentUrl);
    lastUrl = currentUrl;
  }
}, 1000); // 每秒检查一次

3. 使用onload事件

当iframe的页面加载完成后，onload事件会被触发。你可以通过监听这个事件来检查URL的变化。请注意，这个方法只有在iframe完全重新加载页面时才有效，对于单页面应用（SPA）中的URL变化无效。

例子：

javascript
document.getElementById('myIframe').onload = function() {
  console.log('新加载的URL:', this.contentWindow.location.href);
};

4. 使用现代浏览器API（如MutationObserver）

MutationObserver是一个可以用来监视DOM变化的强大工具。虽然它不能直接检测URL变化，但你可以监视iframe元素的某些属性变化。

例子：

javascript
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.attributeName === 'src') {
      console.log('URL变化:', mutation.target.src);
    }
  });
});

const iframe = document.getElementById('myIframe');
observer.observe(iframe, { attributes: true });

总结

具体使用哪种方法取决于你的具体需求以及你能控制的代码范围。postMessage是最安全和最灵活的方法，但需要能修改iframe内部的代码。轮询和onload事件更适合那些不能修改iframe代码的情况。MutationObserver提供了一种现代的方式来监视DOM变化，但需要注意它的兼容性和性能影响。