前言
今天中午在领完盒饭,吃饭的时候,正吃着深海鳕鱼片,蘸上番茄酱,那美味,简直无以言表。突然产品急匆匆的跑过来说:“我们要做一个搜索功能,用户在搜索框输入不同的搜索关键词时,url也要跟着变化,但是页面不能被刷新...保证用户刷新页面的时候还能定位到当前的搜索关键词”吧啦吧吧说了一大堆后,留下一句:“这个需求很简单,怎么实现我不管”,便扬长而去...留下我独自一人,面对着我已经凉透的深海鳕鱼片...
诱人的history API
添加和修改历史记录中的条目
HTML5引入了 history.pushState()
和 history.replaceState()
方法,它们分别可以添加和修改历史记录条目。这些方法通常与window.onpopstate
配合使用。
使用 history.pushState()
可以改变referrer
,它在用户发送 XMLHttpRequest
请求时在HTTP
头部使用,改变state
后创建的 XMLHttpRequest
对象的referrer
都会被改变。因为referrer
是标识创建 XMLHttpRequest
对象时 this
所代表的window
对象中document
的URL
。
pushState() 方法的例子
let stateObj = {
foo: "bar",
};
history.pushState(stateObj, "page 2", "bar.html");
假如当前浏览器地址显示为http://mozilla.org
,上述方法将使浏览器地址栏显示为http://mozilla.org/bar.html
,但并不会导致浏览器加载bar.html
,甚至不会检查bar.html
是否存在。
假设现在用户又访问了http://google.com
,然后点击了返回按钮。此时,地址栏将显示 http://mozilla.org/bar.html
,history.state
中包含了 stateObj
的一份拷贝。页面此时展现为bar.html
。且因为页面被重新加载了,所以popstate
事件将不会被触发。
如果我们再次点击返回按钮,页面URL
会变为http://mozilla.org/foo.html
,文档对象document
会触发另外一个 popstate
事件,这一次的事件对象state object
为null
。 这里也一样,返回并不改变文档的内容,尽管文档在接收 popstate
事件时可能会改变自己的内容,其内容仍与之前的展现一致,页面并不会被刷新。
pushState() 方法
pushState()
需要三个参数: 一个状态对象, 一个标题 (目前被忽略
), 和 (可选的
) 一个URL
. 让我们来解释下这三个参数详细内容:
- 状态对象(state object) — 状态对象
state
是一个JavaScript
对象,通过pushState ()
创建新的历史记录条目。无论什么时候用户导航到新的状态,popstate
事件就会被触发,且该事件的state
属性包含该历史记录条目状态对象的副本。 状态对象可以是能被序列化的任何东西。原因在于Firefox
将状态对象保存在用户的磁盘上,以便在用户重启浏览器时使用,我们规定了状态对象在序列化表示后有640k
的大小限制。如果你给pushState()
方法传了一个序列化后大于640k
的状态对象,该方法会抛出异常。如果你需要更大的空间,建议使用sessionStorage
以及localStorage
. - 标题(title) —
Firefox
目前忽略这个参数,但未来可能会用到。在此处传一个空字符串应该可以安全的防范未来这个方法的更改。或者,你可以为跳转的state
传递一个短标题。 - URL — 该参数定义了新的历史
URL
记录。注意,调用pushState()
后浏览器并不会立即加载这个URL
,但可能会在稍后某些情况下加载这个URL
,比如在用户重新打开浏览器时。新URL
不必须为绝对路径。如果新URL
是相对路径,那么它将被作为相对于当前URL
处理。新URL
必须与当前URL
同源,否则pushState()
会抛出一个异常。该参数是可选的,缺省为当前URL
。
在某种意义上,调用 pushState()
与 设置 window.location = "#foo"
类似,二者都会在当前页面创建并激活新的历史记录。但 pushState()
具有如下几条优点:
- 新的
URL
可以是与当前URL
同源的任意URL
。相反,只有在修改哈希时,设置window.location
才能是同一个document
。 - 如果你不想改
URL
,就不用改。相反,设置window.location = "#foo"
;在当前哈希不是#foo
时, 才能创建新的历史记录项。 - 你可以将任意数据和新的历史记录项相关联。而基于哈希的方式,要把所有相关数据编码为短字符串。
- 如果 标题 随后还会被浏览器所用到,那么这个数据是可以被使用的(哈希则不是)。
注意pushState()
绝对不会触发 hashchange
事件,即使新的URL
与旧的URL
仅哈希不同也是如此。
replaceState() 方法
history.replaceState()
的使用与 history.pushState()
非常相似,区别在于 replaceState()
是修改了当前的历史记录项而不是新建一个。 注意这并不会阻止其在全局浏览器历史记录中创建一个新的历史记录项。
使用场景
replaceState()
的使用场景在于为了响应用户操作,你想要更新状态对象state
或者当前历史记录的URL
。
replaceState() 方法示例
假设 http://mozilla.org/foo.html
执行了如下JavaScript
代码:
let stateObj = {
foo: "bar",
};
history.pushState(stateObj, "page 2", "bar.html");
上文2行代码可以在 "pushState()
方法示例" 部分找到。然后,假设http://mozilla.org/bar.html
执行了如下 JavaScript
:
history.replaceState(stateObj, "page 3", "bar2.html");
这将会导致地址栏显示http://mozilla.org/bar2.html
,但是浏览器并不会去加载bar2.html
甚至都不需要检查 bar2.html
是否存在。
假设现在用户重新导向到了http://www.microsoft.com
,然后点击了回退按钮。这里,地址栏会显示http://mozilla.org/bar2.html
。假如用户再次点击回退按钮,地址栏会显示http://mozilla.org/foo.html
,完全跳过了bar.html
。
popstate
事件
使用 window.onpopstate
来监听返回事件
每当活动的历史记录项发生变化时, popstate
事件都会被传递给window
对象。如果当前活动的历史记录项是被 pushState
创建的,或者是由 replaceState
改变的,那么 popstate
事件的状态属性state
会包含一个当前历史记录状态对象的拷贝。
使用示例请参见 window.onpopstate 。
有点像git stash
命令,stash
之后就可以操作git stash pop
命令,来将stash
的内容pop
出来。
获取当前状态
页面加载时,或许会有个非null
的状态对象。这是有可能发生的,举个例子,假如页面(通过pushState()
或 replaceState()
方法)设置了状态对象而后用户重启了浏览器。那么当页面重新加载时,页面会接收一个onload
事件,但没有popstate
事件。然而,假如你读取了history.state
属性,你将会得到如同popstate
被触发时能得到的状态对象。
你可以读取当前历史记录项的状态对象state
,而不必等待popstate
事件, 只需要这样使用history.state
属性:
let currentState = history.state;
对比
pushState |
replaceState |
---|---|
会在当前页面创建并激活新的历史记录,点击返回按钮会返回到之前的url | 会修改当前的历史记录,按回退按钮,会跳过被修改的url |
参考:History_API
原来,这个需求是真的很简单,终于可以开心的继续吃我的深海鳕鱼片了...