@yangfch3
2015-12-14T13:42:15.000000Z
字数 1291
阅读 3747
JavaScript
浏览器器窗口有一个 history
对象,用来保存浏览历史。
最常用属性:length
history.length;
// 3
history
是不可遍历的。
最常用方法:
back()
:移动到上一个访问页面,等同于浏览器的后退键。forward()
:移动到下一个访问页面,等同于浏览器的前进键。go()
:接受一个整数作为参数,移动到该整数指定的页面,比如 go(1)
相当于 forward()
,go(-1)
相当于 back()
,go(0)
相当于刷新当前页面。不要使用 history 的 back() 方法来实现登陆后返回的功能!!!
这两个方法是 HTML5
为 history
新增的,用来在浏览历史中添加和修改记录。
history.pushState()
方法接受三个参数,依次为:
state
:一个与指定网址相关的 状态对象,popstate
事件触发时,该对象会传入 回调函数。如果不需要这个对象,此处可以填 null
。title
:新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填 null
。url
:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。注意:
pushState()
方法不会触发页面刷新;
如果设置了一个非同域的网址,则会报错。
history.replaceState()
方法的参数与 pushState()
方法一模一样,用于修改浏览历史中当前页面的值。
history.state
属性保存当前页面的 state
对象。是使用 pushState
或 replaceState
方法的第一个参数设置的对应页面专属的一个对象值。
history.pushState({page: 1}, "title 1", "?page=1");
history.state
// { page: 1 }
每当同一个文档的浏览历史(即 history
对象)出现变化时,就会触发 popstate
事件。需要注意的是,仅仅调用 pushState
方法或 replaceState
方法 ,并不会触发该事件(只是设置好这个 state
属性),只有用户点击浏览器倒退按钮和前进按钮,或者使用 JavaScript
调用 back
、forward
、go
方法时才会触发。
另外,该事件只针对同一个窗口中的历史记录,如果浏览历史的切换,导致加载不同的文档,该事件也不会触发。
window.onpopstate = function(event) {
console.log("location: " + document.location);
console.log("state: " + JSON.stringify(event.state));
// event.state 即为通过pushState和replaceState方法,为当前url绑定的state对象。
};
// location: http://ce.sysu.edu.cn/
// state: {"paghe":0}