使用href与target时能否保留目标窗口的浏览历史记录？

问题背景 #

通过A页面的链接，使用target="show"在同一个新标签页打开B.html和C.html时，当前Chrome、Edge浏览器中，该标签页无法通过前进/后退按钮切换B和C页面。用户反馈这曾是早期浏览器的默认行为，希望恢复该功能以实现图片的切换查看。

示例代码 #

A.html

<html>
  <a href="B.html" target="show">B</a>
  <a href="C.html" target="show">C</a>
</html>

B.html

<html>
  <h1>B</h1>
</html>

C.html

<html>
  <h1>C</h1>
</html>

行为变化原因 #

早期浏览器中，使用命名target加载新页面时，会将每个页面添加到目标窗口的浏览历史中。但现代浏览器（Chrome、Edge等）为优化体验调整了规则：当向已存在的命名标签页/窗口加载新URL时，会替换当前历史记录条目（效果类似location.replace()），而非新增条目，因此无法通过前进后退切换页面。

可行解决方案 #

1. 用iframe替代命名窗口 #

这是最简便的方案，无需额外JavaScript。在A页面嵌入命名为show的iframe，链接的target指向该iframe，iframe的浏览历史会被正常保留，支持前进后退操作：

<html>
  <iframe name="show" width="800" height="600"></iframe>
  <a href="B.html" target="show">B</a>
  <a href="C.html" target="show">C</a>
</html>

该方案适合图片、文档展示类场景，同源限制宽松，无需额外逻辑。

2. JavaScript手动添加历史记录 #

如果必须使用独立标签页，可通过JS绑定点击事件，手动为目标窗口添加历史记录（要求所有页面同源，即同一域名、协议、端口，否则会触发浏览器同源策略限制）：

<html>
  <a href="B.html" target="show" onclick="addHistory(this.href)">B</a>
  <a href="C.html" target="show" onclick="addHistory(this.href)">C</a>

  <script>
    function addHistory(url) {
      const targetWin = window.open('', 'show');
      targetWin.location.href = url;
      // 手动添加历史记录条目
      targetWin.history.pushState({}, '', url);
    }
  </script>
</html>

总结 #

现代浏览器修改了命名target的历史记录行为，默认不再新增条目。上述两种方案可恢复历史记录保留功能，其中iframe方案更适合你的图片浏览场景，实现简单且无同源限制。

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