JavaScript Window History
JavaScript Window History
Window.history
对象是浏览器API的一部分,允许JavaScript与浏览器历史记录交互。使用JavaScript,用户可以获取和操作浏览器的记录,包括向前/向后导航、保存书签等。
属性
length
Window.history.length
属性返回浏览器历史记录中的条目数(无论是历史记录还是session历史记录)。
方法
back()
Window.history.back()
方法使浏览器回到历史记录中的前一个页面。如果历史记录中没有前一个页面,则back()
方法不执行任何操作。
forward()
Window.history.forward()
方法使浏览器前进到历史记录中的下一个页面。如果历史记录中没有下一个页面,则forward()
方法不执行任何操作。
go()
Window.history.go()
方法允许浏览器向前或向后浏览历史记录。可以向前或向后浏览一个指定的数量,可以是正数或负数。
用法示例:
// 向前浏览一次历史记录
history.go(1);
// 向后浏览一次历史记录
history.go(-1);
// 向前浏览两次历史记录
history.go(2);
pushState()
Window.history.pushState()
方法添加一个新条目到浏览器的历史记录,但是它不会导致浏览器加载新页面。pushState()
方法添加的条目仅仅修改浏览器的历史记录,而不会触发页面的重新加载。
此方法需要三个参数:新状态对象、新状态标题和可选的相对的URL(该URL相对于当前页面URL)。
用法示例:
history.pushState(null, "Homepage", "/homepage");
replaceState()
Window.history.replaceState()
方法用新条目替换当前的历史记录条目。与pushState()
方法不同,调用replaceState()
方法不会添加一个新条目到历史记录中,而是用新状态对象替换当前条目。
此方法需要三个参数:新状态对象、新状态标题和可选的相对的URL(该URL相对于当前页面URL)。
用法示例:
history.replaceState(null, "Homepage", "/homepage");
事件
popstate事件
popstate
事件在操作浏览器历史记录时触发。当用户点击浏览器的前进或后退按钮时,该事件会被触发。
当使用pushState()
方法和replaceState()
方法修改历史记录时,也会触发popstate
事件,但是这种情况下不会重新加载页面。
popstate
事件传递一个事件对象作为参数,其中包含历史记录的状态信息。该状态对象包含当前历史记录条目的状态数据。
window.addEventListener("popstate", function(event) {
console.log('location: ' + document.location + ', state: ' + JSON.stringify(event.state));
});
注意事项
- 可以在同一个页面中修改历史记录,但是如果访问过程中涉及到页面历史记录的任何部分的原始加载,则增加或修改历史记录会重新加载页面。
- 不能使用
pushState()
和replaceState()
方法修改来自外部站点的历史记录。 - 在
pushState()
和replaceState()
方法中使用的URL的路径必须与当前页面的URL路径相同,否则会导致重新加载页面。