操纵浏览器的历史记录

2016-07-16 00:06:00

浏览器的 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; 来获取状态对象});

关键字：JavaScript

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击举报进行投诉反馈！