跨域场景下是否有方法监听iframe的URL变化？

首先明确规则边界：受浏览器同源策略限制，不存在无前置条件的、可直接读取任意跨域iframe URL的通用方案，所有可行实现都需要匹配对应场景条件：

• 场景1：你可以控制iframe加载的目标页面代码
  这是最稳妥、完全合规的实现方式，用浏览器原生支持的postMessage跨源通信能力即可，全程不需要对iframe做任何写入操作，只需要双方做简单的消息约定：
  1. 父页面提前绑定消息监听事件，校验消息来源合法性后接收iframe回传的地址
  2. iframe页面加载完成后，主动把自身当前URL推送给父页面
     参考代码如下：
     父页面逻辑：

  window.addEventListener('message', (event) => {
    // 务必替换为你信任的iframe实际源，不要留空或者用*，避免恶意站点伪造消息
    if (event.origin !== 'https://your-iframe-target-domain.com') return
    const currentIframeUrl = event.data.currentUrl
    // 后续业务逻辑直接用currentIframeUrl即可
  })
  

  iframe页面逻辑：

  // 页面加载完成后主动上报自身URL，第二个参数替换为父页面对应的源
  window.onload = () => {
    window.parent.postMessage({
      currentUrl: window.location.href
    }, 'https://your-parent-page-domain.com')
  }
  

  如果iframe内部存在路由跳转，只需要在路由变化的钩子中重复执行一次postMessage上报，就能拿到实时的最新URL。
• 场景2：你完全无法控制iframe加载的第三方页面，没有修改目标页面代码的权限
  这种场景下所有直接读取iframe.contentWindow.location的方案都会被浏览器跨域安全策略拦截，没有纯前端层面的合规解法。
  唯一可迂回的实现路径是通过自有服务端做iframe请求代理：所有iframe的加载请求先转发到你的自有服务端，由服务端记录实际请求的目标地址再回传给前端，但这个方案存在明显局限性：
  • 无法捕获iframe加载完成后，内部单页应用通过pushState、hash变更触发的前端路由跳转，这类跳转不会产生新的服务端请求，代理层无感知
  • 需要处理第三方站点的Cookie、登录态透传问题，配置不当会导致iframe内的登录状态失效、页面功能异常
  • 多数正规站点有反代理、反爬校验机制，会直接拦截代理请求导致页面加载失败

安全提示：不要尝试利用浏览器漏洞、脚本注入、第三方篡改插件等非正规方式实现需求，这类方案兼容性极差，违反浏览器安全规范，还可能带来数据泄露、合规违规风险。

内容的提问来源于stack exchange，提问作者Chirag Gupta