如何使用JavaScript/JQuery获取iframe跳转更新后的实际URL

问题根因 #

你遇到的是浏览器同源策略的安全限制，这也是你尝试的两个方案都失效的原因：

• 方案1读取的iframe.src是DOM标签的静态属性，只会存储初始化时填写的初始地址，iframe内部发生跳转不会自动更新这个属性值，因此永远只能拿到初始链接。
• 方案2尝试访问的contentWindow.location属于iframe内部的隐私属性，当iframe加载的站点和你的父页面不同源（域名、协议、端口任意一项不一致）时，浏览器会禁止父页面读取该属性，要么返回about:blank要么直接抛出跨域错误。

可行解决方案 #

方案A：可控制iframe站点代码的场景（最推荐）

如果和iframe所属站点是同业务合作方，能修改iframe内的前端代码，用postMessage做跨域通信即可：

1. 在iframe侧的代码中，绑定「weiter按钮点击事件」或者全局路由监听事件，跳转完成后向父页面发送当前路径：

// iframe站点内的前端代码
// 以下代码写在点击weiter跳转路由之后的逻辑中
const currentPath = window.location.pathname;
// 第二个参数替换为你的父页面正式域名，生产环境不要填*避免安全风险
parent.postMessage({ iframeCurrentPath: currentPath }, 'https://你的父页面业务域名');

2. 在父页面监听iframe发送的消息，拿到路径后做业务判断：

// 父页面前端代码
window.addEventListener('message', (event) => {
  // 必须做来源校验，避免恶意消息注入
  if (event.origin !== 'https://koop.energie.check24.de') return;
  const path = event.data.iframeCurrentPath;
  // 匹配目标路径执行业务逻辑即可
  if (path.endsWith('/onlineoffline/')) {
    // 你的位置追踪逻辑
  }
});

方案B：无法控制iframe站点代码的场景

这种情况没有符合浏览器安全规范的纯前端方案可以直接读取iframe内部路径，可根据业务场景选择替代方案：

• 若业务上可和iframe所属站点运营方沟通，申请对方按照方案A的逻辑添加postMessage通信支持即可。
• 若无法协调对方，可尝试通过iframe的load事件监听加载状态，配合后端代理请求校验当前iframe地址，或者通过页面加载后的间接特征做模糊判断。

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