如何为浏览器历史上一条记录添加URL以触发popstate事件

方法1：利用sessionStorage传递回退状态 #

这个方法通过sessionStorage标记回退来源，让previous.html加载时识别标记并触发动画，兼容性强且无需修改原有跳转逻辑。

1. 在current.html中监听回退操作
   浏览器点击回退按钮时会触发popstate事件，我们在事件触发时存入标记，让页面正常完成回退：

   window.addEventListener('popstate', () => {
     // 标记当前是从current.html回退到previous.html
     sessionStorage.setItem('fromCurrentBack', 'true');
   });
   

2. 在previous.html中检测标记并执行动画
   页面加载时检查sessionStorage中的标记，存在则触发动画，随后清除标记避免误触发：

   <!-- CSS动画定义 -->
   <style>
     .back-animation {
       animation: slideIn 0.8s ease-out forwards;
       transform: translateX(-100%);
     }
     @keyframes slideIn {
       to { transform: translateX(0); }
     }
   </style>
   
   <div id="main-content">页面内容</div>
   
   <script>
     window.addEventListener('load', () => {
       const isFromBack = sessionStorage.getItem('fromCurrentBack');
       if (isFromBack === 'true') {
         document.getElementById('main-content').classList.add('back-animation');
         // 清除标记，防止直接打开previous.html时触发动画
         sessionStorage.removeItem('fromCurrentBack');
       }
     });
   </script>
   

方法2：利用history.state传递状态 #

如果不想用存储方案，可以通过修改历史记录的状态对象传递回退信息，但需要调整原有的跳转逻辑：

1. 在previous.html中修改跳转逻辑
   替换普通链接跳转，用pushState添加带状态的历史记录后再跳转：

   <button id="go-to-current">跳转到current.html</button>
   
   <script>
     document.getElementById('go-to-current').addEventListener('click', () => {
       // 添加包含状态的历史记录
       history.pushState({ isBackFromCurrent: false }, '', 'current.html');
       window.location.href = 'current.html';
     });
   </script>
   

2. 在previous.html中监听popstate事件
   回退到previous.html时会触发popstate事件，此时检查状态对象并执行动画：

   <!-- CSS动画同方法1 -->
   <style>
     .back-animation {
       animation: slideIn 0.8s ease-out forwards;
       transform: translateX(-100%);
     }
     @keyframes slideIn {
       to { transform: translateX(0); }
     }
   </style>
   
   <div id="main-content">页面内容</div>
   
   <script>
     window.addEventListener('popstate', (e) => {
       // 验证回退状态
       if (e.state && window.location.pathname.includes('previous.html')) {
         document.getElementById('main-content').classList.add('back-animation');
       }
     });
   </script>
   

注意事项 #

• 方法1无需改动原有跳转逻辑，适合大多数场景；方法2需要控制跳转行为，适用于对存储有顾虑的场景。
• 动画触发后记得清除标记或重置状态，避免用户直接打开previous.html时误触发动画。

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