Skip to content

history 对象是浏览器环境中的一个对象,提供了对浏览器会话历史的访问和操作。它允许开发者在用户浏览历史记录中进行导航,前进或后退到不同的页面。以下是一些常见的 history 对象的方法:

  1. history.back() 后退到上一个页面。

    javascript
    history.back();
  2. history.forward() 前进到下一个页面。

    javascript
    history.forward();
  3. history.go(offset) 前进或后退指定的步数,可以是正数前进、负数后退。

    javascript
    // 后退两步
    history.go(-2);
    
    // 前进三步
    history.go(3);
  4. history.length 返回当前浏览器历史记录中的页面数量。

    javascript
    var pageCount = history.length;
  5. history.pushState(state, title, url) 向浏览器历史记录栈中添加一个新的状态。

    javascript
    history.pushState({ page: 1 }, "Page 1", "/page1");
  6. history.replaceState(state, title, url) 替换当前页面在历史记录中的状态。

    javascript
    history.replaceState({ page: 2 }, "Page 2", "/page2");
  7. window.onpopstate 事件处理程序,当用户点击浏览器的后退或前进按钮时触发。

    javascript
    window.onpopstate = function(event) {
      console.log("Location: " + document.location + ", state: " + JSON.stringify(event.state));
    };

通过使用 history 对象,开发者可以更精细地控制浏览器的导航历史,同时在不触发页面刷新的情况下更新 URL。请注意,pushStatereplaceState 不会触发页面加载,但会改变浏览器的地址栏。这对于实现单页面应用(SPA)等情况非常有用。