在小程序或网页中监听 iframe 的 URL 变化可以通过监控其 src 属性的变化来实现。但是需要注意，小程序的 web-view 组件（类似于 iframe）可能会有一些限制，下面我将分别讲解在普通网页和小程序中的实现方案。

在普通网页中使用 iframe

监听 iframe 的 URL 变化可以使用 MutationObserver 或定时器不断查询的方法：

使用 MutationObserver

这种方法适用于直接在页面嵌入的情况下：

const iframe = document.querySelector('iframe');  
const observer = new MutationObserver((mutationsList) => {  
  mutationsList.forEach((mutation) => {  
    if (mutation.type === 'attributes' && mutation.attributeName === 'src') {  
      console.log('Iframe URL changed to: ', iframe.src);  
    }  
  });  
});  
observer.observe(iframe, { attributes: true });  

使用定时器检查

这种方案适用于 src 改变时引用页面不会自动重新加载的情况：

let lastUrl = iframe.src;  
setInterval(() => {  
  const currentUrl = iframe.src;  
  if (currentUrl !== lastUrl) {  
    console.log('Iframe URL changed to: ', currentUrl);  
    lastUrl = currentUrl;  
  }  
}, 1000);  

在小程序中使用 web-view 组件

小程序中的 web-view 有限制，无法直接使用传统的 DOM APIs。在小程序中，你可以使用一些小程序特有的方法：

1. postMessage 机制：
   • 在 web-view 中的网页开发者可以使用 postMessage 与小程序进行通信。
   • 设定网页中的脚本，当 URL 变化时发送消息给小程序。

网页中的代码例子：

<script>  
  // 发送消息给小程序  
  window.addEventListener('hashchange', function() {  
    const newURL = window.location.href;  
    wx.miniProgram.postMessage({ data: { url: newURL } });  
  });  
</script>  

小程序中的代码：

Page({  
  onLoad() {  
    // 监听来自 web-view 的消息  
    wx.onMessage((res) => {  
      console.log('Received URL change:', res.data.url);  
      // 根据需求跳转  
      wx.navigateBack();  
    });  
  }  
});  

通过这种方法，你可以在 web-view 中通过与小程序主程序通信来实现 URL 变化后的操作，比如返回跳转。确保网页与小程序的通信是双向且安全的，避免信息泄露。