能否自定义浏览器前进后退按钮行为 支持JS虚拟页面导航？

我仅使用单个HTML页面，通过JavaScript控制内容显隐的方式模拟多页面切换效果，实现代码如下：

<html>
  <head>
    <script>
      function show(page_name) {
        var pages = document.getElementsByClassName("pages");
        for (var i=0; i<pages.length; i++) {
          pages.item(i).style.display='none';
        }
        document.getElementById(page_name).style.display='block';
        return false;
      }
    </script>
  </head>
  <body>
    <div id="page1" class="pages" style="display:block">
      <h2>Page1</h2>
      <p><a href="#" onclick="return show('page2')">page2</a></p>
      <p><a href="#" onclick="return show('page3')">page3</a></p>
    </div>
    <div id="page2" class="pages" style="display:none">
      <h2>Page2</h2>
      <p><a href="#" onclick="return show('page1')">page1</a></p>
      <p><a href="#" onclick="return show('page3')">page3</a></p>
    </div>
    <div id="page3" class="pages" style="display:none">
      <h2>Page3</h2>
      <p><a href="#" onclick="return show('page2')">page1</a></p>
      <p><a href="#" onclick="return show('page2')">page2</a></p>
    </div>
  </body>
</html>

请问是否可以为浏览器的“后退”和“前进”按钮设置自定义行为，使其支持在我通过JS模拟的这些“虚拟页面”之间完成正常的前进、后退导航操作？

可以实现，基于HTML5原生History API就能完成虚拟页面和浏览器前进/后退逻辑的绑定，不需要改动你原有DOM显隐切换的核心逻辑，只需要补充三处逻辑：

• 主动切换虚拟页面时，调用history.pushState()将当前页面标识存入浏览器历史栈，让浏览器识别到可导航的历史条目
• 监听window对象的popstate事件，用户点击前进/后退按钮触发事件时，读取事件中存储的页面标识，调用切换方法渲染对应页面
• 页面首次加载时，调用history.replaceState()将默认展示的首页状态写入当前历史记录，避免首次回退出现状态空白

改造后的核心JS代码如下：

// 扩展原有show方法，增加历史记录控制参数
function show(page_name, pushHistory = true) {
  const pages = document.getElementsByClassName("pages");
  for (let i = 0; i < pages.length; i++) {
    pages[i].style.display = 'none';
  }
  document.getElementById(page_name).style.display = 'block';
  // 主动切换页面时才新增历史记录，回退/前进触发切换时不重复压栈
  if (pushHistory) {
    history.pushState(
      { currentPage: page_name },
      document.title,
      `#${page_name}`
    );
  }
  return false;
}

// 监听浏览器前进/后退操作
window.addEventListener('popstate', (e) => {
  const targetPage = e.state?.currentPage || 'page1';
  show(targetPage, false);
});

// 页面初始化时写入默认页状态
window.addEventListener('load', () => {
  // 支持带哈希的链接直接打开对应页面
  const initPage = location.hash.slice(1) || 'page1';
  show(initPage, false);
  history.replaceState({ currentPage: initPage }, document.title, `#${initPage}`);
});

注意：本地直接打开file协议的静态HTML时，部分浏览器会对History API做安全限制，部署到HTTP/HTTPS服务下访问即可正常运行。改造后除了支持前进后退，还支持用户刷新页面定位到当前虚拟页、直接复制带哈希的链接分享到指定页面，体验和真实多页面无明显差异。

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