如何解决Firefox中iframe的fetch操作被添加到浏览器历史的问题？

问题概述 #

你的页面结构为：顶层页面嵌入多个加载middle.html的iframe，每个middle.html包含空iframe，执行fetch请求后设置子iframe的src。在Firefox中，每个fetch都会被添加到浏览器历史，导致用户需要多次点击回退才能返回顶层页面的上一级，Chrome和Safari无此问题。你试过用XHR替代fetch、让顶层页面执行fetch、更换响应解析方式、请求非HTML资源，均未解决问题。

可行的临时解决方案 #

1. 用history.replaceState覆盖多余历史条目 #

在fetch请求完成后，立即调用history.replaceState，将当前iframe的会话历史替换为当前页面状态，消除fetch带来的无效历史记录：

(async function() {
  const params = new URLSearchParams(location.search);
  const url = `something-to-fetch.html?${params.get('id')}`;
  const req = await fetch(url);
  await req.text();

  // 新增：替换当前历史条目，清除fetch产生的多余记录
  history.replaceState(null, document.title, location.href);

  const iframe = document.querySelector('iframe');
  iframe.src = 'child.html';
})();

原理：Firefox错误地将fetch请求纳入了iframe的会话历史，replaceState用当前页面的状态覆盖这条多余记录，避免回退时的无效步骤。

2. 提前给空iframe设置about:blank初始src #

修改middle.html中的空iframe标签，预先设置空白初始src：

<iframe src="about:blank"></iframe>

原理：无src的空iframe在Firefox中可能处于未初始化的特殊状态，提前设置about:blank能避免fetch操作被错误关联到该iframe的历史链中。

3. 用document.write加载子页面内容 #

如果业务允许，直接将子页面内容写入空iframe，而非设置src，避免触发iframe的导航历史：

(async function() {
  const params = new URLSearchParams(location.search);
  const url = `something-to-fetch.html?${params.get('id')}`;
  const req = await fetch(url);
  await req.text();

  const iframe = document.querySelector('iframe');
  const doc = iframe.contentDocument || iframe.contentWindow.document;
  doc.open();
  // 写入child.html的实际内容，也可以先fetch child.html再写入
  doc.write('<!DOCTYPE html><html><head><meta charset="utf-8"><title>child</title></head><body>child</body></html>');
  doc.close();
})();

原理：直接写入内容不会触发iframe的导航操作，也就不会新增历史记录，绕开Firefox的bug逻辑。

测试建议 #

优先尝试方案1，改动最小且直接针对历史记录问题；如果无效，再根据业务场景选择方案2或3。

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