说明
history 对象包含 浏览器 访问过的 URL,相当于 浏览器的 前进、后退
history 对象是 window 对象的一部分,可通过 window.history 或 history 进行访问。
属性
- ngth 返回历史列表中的网址数
方法
- go(n):实现 浏览器后退、浏览器前进,
n为-1表示后退,1表示前进 - back() 加载 history 列表中的前一个 URL,相当于 浏览器后退
- forward() 加载 history 列表中的下一个 URL,相当于 浏览器前进
pushState()
HTML5为history对象添加 history.pushState() 方法,向浏览器历史添加了一个状态(增加一个记录)。
history.pushState(state, title, url);
参数解释:
state: object类型,状态对象,一般为
null。是一个由pushState()方法创建的、与历史纪录相关的javascript对象。当用户定向到一个新的状态时,会触发popstate事件。事件的state属性包含了历史纪录的state对象。title:新页面的标题,但是 所有浏览器目前都忽略这个值,因此这里可以填
nullURL:新历史纪录的url。新URL必须和当前URL在 同一个域,否则,
pushState()将抛出异常。这个参数可选,如果它没有被特别标注,会被设置为文档的当前URL
replaceState()
HTML5为history对象添加 history.replaceState() 方法,把当前的页面的历史记录替换掉
history.replaceState(state, title, url);
参数解释:
state: object类型,状态对象,一般为
null。是一个由pushState()方法创建的、与历史纪录相关的javascript对象。当用户定向到一个新的状态时,会触发popstate事件。事件的state属性包含了历史纪录的state对象。title:新页面的标题,但是 所有浏览器目前都忽略这个值,因此这里可以填
nullURL:新历史纪录的url。新URL必须和当前URL在 同一个域,否则,
pushState()将抛出异常。这个参数可选,如果它没有被特别标注,会被设置为文档的当前URL
例子
创建 1.html,内容如下:
<button onclick="jump()">跳转</button>
<script>
function jump(){
history.replaceState(null,null,'5.result.html')
}
</script>
创建 result.html ,内容如下:
结果页面
在 1.html 中,点击按钮,跳转到 result.html 中
关键:浏览器历史记录中,没有 1.html