window.history

最新推荐文章于 2025-08-08 17:07:36 发布

转载最新推荐文章于 2025-08-08 17:07:36 发布 · 112 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/long-e/p/6242368.html

文章标签：

#javascript #ViewUI

本文详细介绍了HTML5中新增的历史API，包括前进、后退、添加和修改历史记录条目等方法。通过使用history.pushState()和history.replaceState()方法，开发者能够更灵活地管理和控制用户的浏览历史。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：历史记录概述

前进与后退

1、window.history.back()

2、window.history.forward();

移动到指定的历史记录点

window.history.go(num) num为正向前移动num页，为负则是后退num页。

二：添加和修改历史记录条目

HTML5引进了history.pushState()方法和history.replaceState()方法，它们允许你逐条地添加和修改历史记录条目。这些方法可以协同window.onpopstate事件一起工作。

使用history.pushState()会改变referrer的值，而在你调用方法后创建的XMLHttpRequest对象会在HTTP请求头中使用这个值。referrer的值则是创建XMLHttpRequest 对象时所处的窗口的URL。

pushState()方法

pushState()方法有三个参数：一个状态对象，一个标题，一个可选的URL地址。下面来单独考察这三个参数的细节：

　　1、状态对象（state object）一个javascript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate时间都会被触发，并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。

任何可序列化的对象都可以被当做状态对象。因为Firefox浏览器会把状态对象保存到用户的硬盘，这样它们就能在用户重启浏览器之后被还原，我们强行限制状态对象的大小为640k。如果你向pushState()方法传递了一个超过该限额的状态对象，该方法会抛出异常。如果你需要存储很大的数据，建议使用sessionStorage或localStorage。

　　2、标题（title）firefox浏览器目前会忽略该参数，虽然以后可能会用上。考虑到未来可能会对该方法进行修改，传一个空字符串会比较安全。或者，你也可以传入一个简短的标题，标明要进入的状态。（以上都是MDN上的原话，在vue的路由中，有用到这个标题）。

　　3、地址（URL）新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址，但之后，可能会试图加载，例如用户重启浏览器。新的URL不一定是绝对路径；如果是相对路径，它将以当前的URL为基准；传入的URL与当前的URL应该是同源的，否则，pushState()会抛出异常。该参数是可选的；不指定的话则为文档当前URL。

某种意义上，调用pushState()有点类似于设置window.location='#foo'，它们都会在当前文档内创建和激活新的历史记录条目。但pushState()有自己的优势：

　　1、新的URL可以是任意的同源URL，与此相反，使用window.location方法时，只有仅修改hash才能停留在相同的document中。

　　2、根据个人需求来决定是否修改URL。相反，设置window.location='#foo'，只有在当前hash值不少foo时才创建一条新的历史记录。

　　2、你可以在新的历史记录条目中添加抽象数据。如果使用基于hash方法，你只能把相关数据转码成一个很短的字符串。

注意pushState()方法永远不会触发hashchange事件，即便新的地址只变更了hash值。

replaceState()方法

history.replaceState()操作类似于history.pushState()，不同之处在于replaceState()方法会修改当前历史记录条目。当你为了响应用户的某些操作，而要更新当前历史记录条目的状态对象或URL时，使用replaceState()方法会特别合适。

popstate()事件

每当激活历史记录发生变化时，都会触发popstate事件。如果被激活的历史记录条目是由pushState()所创建，或是被replaceState()方法影响到的，popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。

读取当前状态

在页面加载时，可能会包含一个非空的状态对象。这种情况是会发生的，例如，如果页面中使用pushState()或replaceState()方法设置了一个状态对象，然后用户重启了浏览器。当页面重新加载时，页面会触发onload事件，但不会触发popstate事件。但是，如果你读取history.state属性，你会得到一个与popstate事件触发时得到的一样的状态对象。你可以直接读取当前历史记录条目的状态，而不需要等待popstate事件：

var currentState = history.state;

转载于:https://www.cnblogs.com/long-e/p/6242368.html