history.pushState() 和 history.replaceState() 方法

Internet Explorer 10 引入了对 HTML5 草案规范的历史记录界面的支持，该历史记录界面包括用来管理站点的历史记录堆栈和 URL 的方法。 这个控件可以为最终用户提供他们期望从“后退”和“前进”按钮获得的体验，以及在不借助导航或页面加载的情况下提供少量页面更新的性能。HTML5 历史记录的相关定义位于万维网联合会 (W3C) 的 HTML5 规范的第 5.4.2 节。

history.pushState() 和 history.replaceState() 方法

使用 history.pushState() 方法，你可以创建新的历史记录条目，以及选择性地包含状态对象。使用history.replaceState() 方法，你可以修改当前历史记录项。下面是这两种方法的语法。

JavaScript

history.pushState(data, title, url); 
history.replaceState(data, title, url); 

参数	描述
data	要与新的历史记录条目相关联的状态对象。这会作为 onpopstate 事件的 state 属性返回。
title	Internet Explorer 10 当前已将其忽略。
url	（可选）当前 URL 的同一个域或源中的相对或绝对 URL。

 

通过使用这些新的 HTML5 方法，你可以修改网站内的路径，但是出于安全性考虑，你无法修改当前 URL 的域或源。你还可以修改 URL 中井号之后的片段（也称为哈希），或者 URL 中问号 (?) 之后的查询区段。例如，使用 URL "http://go.microsoft.com/fwlink/p/?LinkId=214816"，你可以修改 ".com" 右侧的几乎所有内容。你可以将它更改为 "http://go.microsoft.com/fwlink/p/?LinkID=58649"，但你无法更改域 (go.microsoft.com)、端口或方案 (http://)。 下表显示了此 URL 的一些其他更新，以及是否允许使用这些更新：

URL 更改	状态
go.microsoft.com/foo	允许
http://go.microsoft.com/foo	允许
/foo	允许
Foo?query	允许
/foo#somedata	允许
www.microsoft.com	错误
http://go.microsoft.com:9090/foo	错误

 

window.onpopstate 事件

当用户在历史记录中的两个旅游条目之间进行导航时（其中至少有一个条目是使用 history.pushState() 或 history.replaceState() 创建的），window.onpopstate 事件处理程序会通知你的应用。这可以通过 UI 交互实现，例如单击“后退”或“前进”按钮、单击上下文菜单中的“后退”或按下 Backspace 键。也可通过按下 Alt+向左键、Alt+向右键或 Backspace 键，或通过调用 history.back、history.forward 或 history.go 实现。

Popstate 事件参数包含来自 pushState 或 replaceState 方法的状态对象（由数据参数设置）。history.state 属性也包含状态对象。初次加载页面时，状态将为 Null。调用 pushState 时会清除前进堆栈，但调用 replaceState 不会清除前进堆栈。

API 参考

PopStateEvent

pushState

IEBlog 文章

IE10 中的 HTML5 历史记录

规范

HTML5：第 5.5.2 节