Web History Api 记录

我心飞翔 分类:javascript

一、 常用方法

1.1 history.back()

history 中向后跳转,和点击浏览器回退按钮的效果相同。

window.history.back();
 

1.2 history.forward()

history 中向前跳转,和点击浏览器前进按钮的效果相同。

window.history.forward();
 

1.3 history.go()

history 中跳转到指定的一个点,点的位置通过与当前页面相对位置来标志 (当前页面的相对位置标志为0),前进为正,后退为负。

// 向后移动一个页面 ,等同于调用 back()
window.history.go(-1);
// 向前移动一个页面 ,等同于调用 forward()
window.history.go(1);

// 向后/前移动两个页面
window.history.go(-2);
window.history.go(2);
 

可以使用 window.history.length 来确定当前历史堆栈中页面的数量

二、pushState 和 replaceState

pushState()replaceState() 会修改浏览器的 URL,但是浏览器并不会立即加载这个 URL 对应的页面,即改变 URL 而不刷新页面。

2.1 history.pushState()

window.history.pushState(state, title, url);
 

参数说明:

  • state: 一个与添加的记录相关联的状态对象,主要用于 popstate 事件。该事件触发时,该对象会传入回调函数。也就是说,浏览器会将这个对象序列化以后保留在本地,重新载入这个页面的时候,可以拿到这个对象。如果不需要这个对象,此处可以填 null。
  • title: 新页面的标题。但是,现在所有浏览器都忽视这个参数,所以这里可以填空字符串。
  • url: 新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

假定当前网址是 http://localhost:8000/1.html 使用 pushState() 方法在浏览记录(history 对象)中添加一个新记录。

var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');
 

添加新记录后,浏览器地址栏立刻显示 http://localhost:8000/2.html , 但并不会跳转到 2.html,甚至也不会检查 2.html 是否存在,它只是成为浏览历史中的最新记录。这时,在地址栏输入一个新的地址( baidu.com ),然后点击了倒退按钮,页面的 URL 将显示 2.html;你再点击一次倒退按钮,URL 将显示 1.html

总之,pushState() 方法不会触发页面刷新,只是导致 history 对象发生变化,地址栏会有反应。

使用该方法之后,就可以用 history.state 属性读出状态对象。

var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');
console.log(history.state); // {foo: "bar"}
 

2.2 history.replaceState()

replaceState() 方法用来修改 history 对象的当前记录,其他都与 pushState() 方法一模一样。

三、popstate 事件

每当同一个文档的浏览历史(即 history 对象)出现变化时,就会触发 popstate 事件。

注意,仅仅调用 pushState() 方法或 replaceState() 方法 ,并不会触发该事件,只有用户点击浏览器倒退按钮和前进按钮,或者使用 JavaScript 调用 history.back()history.forward()history.go() 方法时才会触发。另外,该事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件也不会触发。

window.onpopstate = function (event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
};
 

回调函数的参数是一个 event 事件对象,它的 state 属性指向 pushStatereplaceState 方法为当前 URL 所提供的状态对象(即这两个方法的第一个参数)。

四、参考

  • developer.mozilla.org/zh-CN/docs/…
  • javascript.ruanyifeng.com/bom/history…

回复

我来回复
  • 暂无回复内容