JavaScript教程:history 对象

说明

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:新页面的标题,但是 所有浏览器目前都忽略这个值,因此这里可以填 null

  • URL:新历史纪录的url。新URL必须和当前URL在 同一个域,否则,pushState() 将抛出异常。这个参数可选,如果它没有被特别标注,会被设置为文档的当前URL

replaceState()

HTML5为history对象添加 history.replaceState() 方法,把当前的页面的历史记录替换掉

history.replaceState(state, title, url);

参数解释:

  • state: object类型,状态对象,一般为 null。是一个由 pushState() 方法创建的、与历史纪录相关的javascript对象。当用户定向到一个新的状态时,会触发popstate事件。事件的state属性包含了历史纪录的state对象。

  • title:新页面的标题,但是 所有浏览器目前都忽略这个值,因此这里可以填 null

  • URL:新历史纪录的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


原文出处:/show_1IX3BNrqrVbG.html