js监听iframe路由变化

在JavaScript中监听如果rame内的路由变化，通常需要利用一些技术手段，因为浏览器出于安全考虑不会直接暴露iframe内部的导航事件。一种常见的做法是使用postMessage API或者ContentWindow对象。这里简单介绍两种方法：

**1. 使用postMessage：**
- 在外层窗口（即包含iframe的页面）添加事件监听器，当iframe页面发送消息（例如更改路由时），可以接收到这个消息。

window.addEventListener('message', function(event) {
  if (event.origin === 'your_iframe_url') { // 检查消息来源
    if (event.data === 'routeChanged') { // 路由改变时携带的特定数据
      console.log('Iframe route changed');
      // 在这里处理路由变化的业务逻辑
    }
  }
}, false);

- 在iframe内，通过`window.parent.postMessage()`发送路线变化的信息。

// 假设你在iframe的路由组件里有这个方法
function changeRoute(newRoute) {
  window.parent.postMessage('routeChanged', '*'); // 发送消息到父窗口
}

**2. 使用ContentWindow对象：**
- 如果iframe的内容脚本支持，你可以获取到它的`contentWindow`属性，然后添加事件监听。

const iframe = document.getElementById('your_iframe_id');
if (iframe.contentWindow) {
  iframe.contentWindow.addEventListener('hashchange', () => {
    console.log('Iframe route changed');
    // 处理路由变化逻辑
  });
}

注意，以上方法并不保证在所有情况下都能工作，特别是跨域的iframe可能会受到限制。此外，由于iframe环境的隔离，你可能无法获取到完整的URL变化，只能依赖于传递的部分信息。在实际应用中，请根据具体情况调整并测试。