当前位置：首页 > JavaScript

js实现前进后退

2026-02-02 23:42:21JavaScript

使用 History API 实现前进后退

HTML5 的 History API 提供了 pushState 和 replaceState 方法，允许开发者在不刷新页面的情况下修改浏览器历史记录。结合 popstate 事件可以实现前进后退功能。

js实现前进后退

// 添加新历史记录
window.history.pushState({page: 1}, "title 1", "?page=1");

// 替换当前历史记录
window.history.replaceState({page: 2}, "title 2", "?page=2");

// 监听前进后退事件
window.addEventListener('popstate', function(event) {
    console.log("当前状态:", event.state);
    // 根据event.state更新页面内容
});

使用 location.hash 实现简单路由

对于简单的单页应用，可以通过修改 location.hash 并监听 hashchange 事件来实现前进后退功能。

js实现前进后退

// 设置hash
window.location.hash = "page1";

// 监听hash变化
window.addEventListener('hashchange', function() {
    console.log("当前hash:", window.location.hash);
    // 根据hash更新页面内容
});

模拟浏览器按钮功能

如果需要直接模拟浏览器的前进后退按钮行为，可以使用 History API 的方法：

// 后退
window.history.back();

// 前进
window.history.forward();

// 跳转指定步数
window.history.go(-2); // 后退两页
window.history.go(1);  // 前进一页

自定义历史记录管理

对于需要更复杂控制的场景，可以维护自己的历史记录栈：

const historyStack = [];
let currentIndex = -1;

function navigateTo(page) {
    // 清除当前索引后的所有记录
    historyStack.splice(currentIndex + 1);
    historyStack.push(page);
    currentIndex++;
    renderPage(page);
}

function goBack() {
    if (currentIndex > 0) {
        currentIndex--;
        renderPage(historyStack[currentIndex]);
    }
}

function goForward() {
    if (currentIndex < historyStack.length - 1) {
        currentIndex++;
        renderPage(historyStack[currentIndex]);
    }
}

function renderPage(page) {
    // 根据page内容更新UI
    console.log("显示页面:", page);
}