浏览器的 window
对象提供的 history
对象给予了我们访问和操纵历史记录(仅针对当前文档)的能力。
history api
window.history.back();
浏览器返回一页。window.history.forward();
浏览器前进一页。window.history.go(i);
浏览器前进(后退)i
页,如果 i
为 0 ,则刷新当前页面。window.history.length;
浏览器历史记录栈中一共有多少页。window.history.state;
当前的状态对象
window.history.replaceState(obj, title, url)
window.history.pushState(obj, title, url);
两个方法都可以达到替换当前浏览器地址而不刷新页面的作用:让浏览器的地址栏显示为我们传入的地址,但不会加载该页面也不会检查该页面是否存在。
区别在于前者会修改当前历史记录条目,而后者是创建新历史记录条目。
方法接受三个参数
状态对象(state object),任何可序列化的对象都可以被当做状态对象,大小限制为 640K。
标题(title) ,暂时大多数浏览器都会忽略此参数,传入空字符串即可
地址(URL),传入的
url
应与原地址同源,否则会报错
popstate事件
每当同一个文档的浏览历史(即 history 对象)出现变化时,就会触发 popstate 事件。但是pushState
和 replaceState
两个方法不会触发该事件
事件的回调函数的 event
参数的state
属性指向 pushState
和 replaceState
方法为当前 url 所提供的状态对象(即这两个方法的第一个参数)。
window.addEventListener('popstate', function(event) {
console.log("location: " + document.location);
console.log("state: " + JSON.stringify(event.state));
// 或者通过 var currentState = history.state; 来获取状态对象
});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。