1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
---
title: History.pushState()
slug: Web/API/History/pushState
tags:
- API
- History
- Location
- Web
- 会话
- 历史
- 参考
- 方法
translation_of: Web/API/History/pushState
---
<div>History API</div>
<p>在 <a href="/zh-CN/docs/Web/HTML">HTML</a> 文档中，<strong><code>history.pushState()</code></strong> 方法向当前浏览器会话的历史堆栈中添加一个状态（state）。</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox notranslate">history.pushState(<var>state</var>, <var>title</var>[, <var>url</var>])</pre>
<h3 id="参数">参数</h3>
<dl>
<dt><code>state</code></dt>
<dd>状态对象是一个JavaScript对象，它与<code>pushState()</code>创建的新历史记录条目相关联。 每当用户导航到新状态时，都会触发{{event("popstate")}}事件，并且该事件的状态属性包含历史记录条目的状态对象的副本。</dd>
<dd>状态对象可以是任何可以序列化的对象。 因为Firefox将状态对象保存到用户的磁盘上，以便用户重新启动浏览器后可以将其还原，所以我们对状态对象的序列化表示施加了640k个字符的大小限制。 如果将序列化表示形式大于此状态的状态对象传递给<code>pushState()</code>，则该方法将引发异常。 如果您需要更多空间，建议您使用 {{domxref("Window.sessionStorage", "sessionStorage")}}或者{{domxref("Window.localStorage", "localStorage")}}。</dd>
<dt><code>title</code></dt>
<dd><a href="https://github.com/whatwg/html/issues/2174">当前大多数浏览器都忽略此参数</a>，尽管将来可能会使用它。 在此处传递空字符串应该可以防止将来对方法的更改。 或者，您可以为要移动的州传递简短的标题。</dd>
<dt><code>url</code> {{optional_inline}}</dt>
<dd>新历史记录条目的URL由此参数指定。 请注意，浏览器不会在调用<code>pushState() </code>之后尝试加载此URL，但可能会稍后尝试加载URL，例如在用户重新启动浏览器之后。 新的URL不必是绝对的。 如果是相对的，则相对于当前URL进行解析。 新网址必须与当前网址相同 {{glossary("origin")}}； 否则，<code>pushState()</code>将引发异常。 如果未指定此参数，则将其设置为文档的当前URL。</dd>
</dl>
<h2 id="描述">描述</h2>
<p>从某种程度来说, 调用 <code>pushState()</code> 和 <code>window.location = "#foo"</code>基本上一样, 他们都会在当前的document中创建和激活一个新的历史记录。但是 <code>pushState()</code> 有以下优势：</p>
<ul>
<li>新的URL可以是任何和当前URL同源的URL。但是设置 {{domxref("window.location")}} 只会在你只设置锚的时候才会使当前的URL。</li>
<li>非强制修改URL。相反，设置 <code>window.location = "#foo";</code> 仅仅会在锚的值不是#foo情况下创建一条新的历史记录。</li>
<li>可以在新的历史记录中关联任何数据。<code>window.location = "#foo"</code>形式的操作，你只可以将所需数据写入锚的字符串中。</li>
</ul>
<p>注意： <code>pushState()</code> 不会造成 {{event("hashchange")}} 事件调用, 即使新的URL和之前的URL只是锚的数据不同。</p>
<h2 id="示例">示例</h2>
<p>以下代码通过设置<code><em>state</em></code>, <code><em>title</em></code>和<code><em>url</em></code>创建一条新的历史记录。</p>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js notranslate">const state = { 'page_id': 1, 'user_id': 5 }
const title = ''
const url = 'hello-world.html'
history.pushState(state, title, url)</pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "history.html#dom-history-pushstate", "History.pushState()")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>没有改变{{SpecName("HTML5 W3C")}}.</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "history.html#dom-history-pushstate", "History.pushState()")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>初始化</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.History.pushState")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li><a href="/zh-CN/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a></li>
</ul>
|
