js页面历史返回

阿超

发布于 2024-08-23 19:22:24

570

发布于 2024-08-23 19:22:24

文章被收录于专栏：快乐阿超

历史是一堆灰烬，但灰烬深处有余温。——黑格尔

我们可以使用history.back()来进行页面返回

history的文档：

History API - Web API | MDN

除了返回还可以前进

history.forward();

以及

// 向后跳转一个页面（等价于调用 back()）
history.go(-1);

然后还有

// 向前跳转一个页面，就像调用 forward()
history.go(1);

当然传入0就是刷新

// 以下语句都具有刷新页面的效果
history.go(0);
history.go();

还有查看页面栈长度

const numberOfEntries = history.length;

补充：

window.addEventListener("popstate", (event) => {
  alert(`位置：${document.location}，状态：${JSON.stringify(event.state)}`);
});

history.pushState({ page: 1 }, "标题 1", "?page=1");
history.pushState({ page: 2 }, "标题 2", "?page=2");
history.replaceState({ page: 3 }, "标题 3", "?page=3");
history.back(); // 显示警告“位置：http://example.com/example.html?page=1，状态：{"page":1}”
history.back(); // 显示警告“位置：http://example.com/example.html，状态：null”
history.go(2); // 显示警告“位置：http://example.com/example.html?page=3，状态：{"page":3}”

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-07-03，如有侵权请联系 cloudcommunity@tencent.com 删除

html