如何阻止iframe导航修改顶层窗口历史状态？Chrome最新版问题求助

这确实是Chrome近期版本引入的行为变化，我也碰到过类似场景——大概率是Chrome对iframe与顶层窗口历史栈关联逻辑的调整，而非传统意义上的Bug（毕竟旧版Chrome和全版本Firefox都没这问题）。针对你提到的用history对象干预的思路，这里有几个可行的方案：

1. 用顶层窗口的history.replaceState接管状态 #

每次修改iframe的src时，同步更新顶层窗口的历史状态，同时监听popstate事件手动控制iframe的src，彻底绕过Chrome的默认行为：

// 获取目标iframe元素
const targetIframe = document.getElementById('your-iframe-id');
// 初始src（根据实际情况调整）
const initialSrc = '你的初始iframe地址';

// 封装修改iframe src的方法
const updateIframeSrc = (newSrc) => {
  // 更新iframe的src
  targetIframe.src = newSrc;
  // 用replaceState替换当前顶层历史记录，避免新增历史条目
  history.replaceState({ currentIframeSrc: newSrc }, '', window.location.href);
};

// 监听浏览器后退/前进事件
window.addEventListener('popstate', (event) => {
  // 根据历史状态设置iframe的src
  const targetSrc = event.state?.currentIframeSrc || initialSrc;
  targetIframe.src = targetSrc;
});

这样操作后，浏览器的后退按钮只会触发顶层窗口的历史状态变化，我们通过popstate事件手动控制iframe的src，就不会出现它自动加载旧地址的情况了。

2. 让iframe内部导航不生成历史记录 #

如果你的iframe和主页面是同源的，可以直接用location.replace修改iframe的地址，这样iframe自身的历史栈不会新增条目，自然也就不会影响顶层窗口的历史：

const updateIframeSrc = (newSrc) => {
  targetIframe.contentWindow.location.replace(newSrc);
};

⚠️ 注意：这个方案仅适用于同源iframe，跨域场景下会因为同源策略限制而无法执行。

3. 极端场景：限制iframe的导航能力 #

如果上面的方案都不适用，还可以通过sandbox属性限制iframe的导航行为，但这种方法副作用较大，只建议在特殊场景下使用：

<!-- 添加sandbox属性限制iframe的导航行为，可根据需求调整权限参数 -->
<iframe id="your-iframe-id" sandbox="allow-same-origin allow-scripts"></iframe>

跨域场景额外提醒 #

如果是跨域iframe，上面的部分方法会因同源策略失效，这时候可以考虑通过postMessage和iframe内部页面通信，让iframe自身调用history.replaceState管理自己的历史栈，避免影响顶层窗口。

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