[关闭]
@yangfch3 2015-12-14T13:42:15.000000Z 字数 1291 阅读 3664

JS 的 history 对象

JavaScript


概述

浏览器器窗口有一个 history 对象,用来保存浏览历史。

最常用属性:length

  1. history.length;
  2. // 3

history 是不可遍历的。

最常用方法:

不要使用 history 的 back() 方法来实现登陆后返回的功能!!!


pushState & replaceState

这两个方法是 HTML5history 新增的,用来在浏览历史中添加和修改记录。

history.pushState() 方法接受三个参数,依次为:

注意:
pushState() 方法不会触发页面刷新;
如果设置了一个非同域的网址,则会报错。

history.replaceState() 方法的参数与 pushState() 方法一模一样,用于修改浏览历史中当前页面的值


state

history.state 属性保存当前页面的 state 对象。是使用 pushStatereplaceState 方法的第一个参数设置的对应页面专属的一个对象值。

  1. history.pushState({page: 1}, "title 1", "?page=1");
  2. history.state
  3. // { page: 1 }

popstate事件

每当同一个文档的浏览历史(即 history 对象)出现变化时,就会触发 popstate 事件。需要注意的是,仅仅调用 pushState 方法或 replaceState 方法 ,并不会触发该事件(只是设置好这个 state 属性),只有用户点击浏览器倒退按钮和前进按钮,或者使用 JavaScript 调用 backforwardgo 方法时才会触发。

另外,该事件只针对同一个窗口中的历史记录,如果浏览历史的切换,导致加载不同的文档,该事件也不会触发。

  1. window.onpopstate = function(event) {
  2. console.log("location: " + document.location);
  3. console.log("state: " + JSON.stringify(event.state));
  4. // event.state 即为通过pushState和replaceState方法,为当前url绑定的state对象。
  5. };
  6. // location: http://ce.sysu.edu.cn/
  7. // state: {"paghe":0}
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注