如何实现iframe内点击链接时同步更新浏览器URL？

前提说明 #

你无法修改Help Desk（iframe内）的页面代码，只能操作父页面（domain.ext/iframepage.html），以下方案分场景给出：

场景1：父页面与iframe同主域（如domain.ext和helpdesk.domain.ext） #

这种情况可以利用同主域的跨域兼容机制，结合浏览器历史API实现URL同步：

1. 给iframe添加ID方便JS定位：

<div class="resp-container">
  <iframe id="helpdesk-iframe" class="resp-iframe" src="https://helpdesk.domain.ext/page" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>

2. 在父页面插入以下脚本：

const iframe = document.getElementById('helpdesk-iframe');
let currentIframeUrl = iframe.src;

// 统一主域名，解除子域跨域限制
document.domain = 'domain.ext';

// 监听iframe加载事件，更新父页面URL
iframe.addEventListener('load', () => {
  const newUrl = iframe.contentWindow.location.href;
  if (newUrl !== currentIframeUrl) {
    // 按需调整URL映射规则：比如把Help Desk的域名替换成父域名
    const displayUrl = newUrl.replace('https://helpdesk.domain.ext', '');
    // 用pushState修改地址栏，不刷新页面
    history.pushState({ iframeUrl: newUrl }, '', displayUrl);
    currentIframeUrl = newUrl;
  }
});

// 处理浏览器前进/后退，同步iframe内容
window.addEventListener('popstate', (e) => {
  if (e.state?.iframeUrl) {
    iframe.src = e.state.iframeUrl;
    currentIframeUrl = e.state.iframeUrl;
  }
});

场景2：父页面与iframe完全跨域（无共同主域） #

受浏览器同源策略限制，无法直接获取iframe内的URL变化（因为不能修改iframe代码发消息），只能用服务器代理折中：

在你的服务器上配置反向代理，将domain.ext/helpdesk/*路径转发到https://helpdesk.domain.ext/*，以Nginx为例：

location /helpdesk/ {
  proxy_pass https://helpdesk.domain.ext/;
  proxy_set_header Host helpdesk.domain.ext;
  proxy_set_header X-Real-IP $remote_addr;
}

之后把iframe的src改成/helpdesk/page，此时父页面和iframe同源，就可以复用场景1的JS代码。

关键注意点 #

• 用pushState修改的URL需要服务器配合路由配置，否则刷新页面会404。比如Nginx要把所有请求转发到iframepage.html，或者按映射路径代理到Help Desk。
• 如果不需要隐藏Help Desk的域名，直接把displayUrl设为newUrl即可，地址栏会显示Help Desk的完整地址。

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