history对象和HTML5 History API

history对象和HTML5 History API

1
2
3
4
5
6
history.back()     // 返回上一个访问的页面，等同于浏览器的返回按钮
history.forward()  // 移动到下一个访问页面，等同于浏览器的前进按钮
history.go()       // 参数为一个整数
history.go(-1)     // 等同于 history.back()
history.go(1)      // 等同于 history.forward()
history.go(0)      // 等同于刷新当前页面

增加的属性

1
2
1、History.state() 返回一个表示历史堆栈顶部的状态的值，只是一种可以不必等待 popstate事件查看状态的方式。
2、History.scrollRestortion()：允许Web应用程序在历史导航上显示地设置默认滚动恢复行为。此属性可以是自动的（auto），或者手动的（manual）

增加的方法

1、History.pushState()：按指定的名称和URL(如果提供该参数)，将数据push进会话历史栈，数据被DOM进行不透明处理，你可以指定任何可以被序列化的js对象。

1
2
3
4
5
6
7
pushState() 需要三个参数:
1、一个状态对象,
2、一个标题 (目前被忽略), 、
3、一个URL(可选的) 必须和当前页面同源,为空则为当前页面url.另外如果是相对地址则是相对于当前url处理。
例子：
	var stateObj = { foo: "bar" };
	history.pushState(stateObj, "page 2", "bar.html");

2、History.replaceState()：按指定的数据，名称和URL(如果提供该参数)，更新历史栈上最新的入口。这个数据被DOM进行了不透明处理。你可以指定任何可以被序列化的js对象。

1
2
3
4
1、history.replaceState()的使用与 history.pushState() 非常相似，区别在于 replaceState() 是修改了当前的历史记录项而不是新建一个。 注意这并不会阻止其在全局浏览器历史记录中创建一个新的历史记录项。
2、replaceState() 的使用场景在于为了响应用户操作，你想要更新状态对象state或者当前历史记录的URL。
3、history.replaceState(stateObj, "page 3", "bar2.html");