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
|
---
title: History.replaceState()
slug: Web/API/History/replaceState
translation_of: Web/API/History/replaceState
---
<p>{{APIRef("DOM")}}</p>
<p><code>replaceState()</code>方法使用<code>state objects</code>, <code>title</code>,和 <code>URL</code> 作为参数， 修改当前历史记录实体，如果你想更新当前的state对象或者当前历史实体的URL来响应用户的的动作的话这个方法将会非常有用。</p>
<h2 id="语法">语法</h2>
<pre class="brush: js"><code class="language-js">history<span class="punctuation token">.replace</span><span class="function token">State</span><span class="punctuation token">(</span>stateObj<span class="punctuation token">, title[, url]</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
<h3 id="参数">参数</h3>
<dl>
<dt>stateObj</dt>
<dd>状态对象是一个JavaScript对象，它与传递给 <code>replaceState</code> 方法的历史记录实体相关联.</dd>
<dt>title</dt>
<dd><a href="https://github.com/whatwg/html/issues/2174">大部分浏览器忽略这个参数</a>, 将来可能有用. 在此处传递空字符串应该可以防止将来对方法的更改。或者，您可以为该状态传递简短标题</dd>
<dt>url {{optional_inline}}</dt>
<dd>历史记录实体的URL. 新的URL跟当前的URL必须是同源; 否则 replaceState 抛出一个异常.</dd>
</dl>
<h2 id="例子">例子</h2>
<p>假设 <span class="nowiki">http://mozilla.org/foo.html</span> 执行下面的 JavaScript 代码:</p>
<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> stateObj <span class="operator token">=</span> <span class="punctuation token">{</span> foo<span class="punctuation token">:</span> <span class="string token">"bar"</span> <span class="punctuation token">}</span><span class="punctuation token">;</span>
history<span class="punctuation token">.</span><span class="function token">pushState</span><span class="punctuation token">(</span>stateObj<span class="punctuation token">,</span> <span class="string token">""</span><span class="punctuation token">,</span> <span class="string token">"bar.html"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
<p>上面这两行的解释可以在 "Example of pushState() method"这个章节找到。然后假设 <span class="nowiki">http://mozilla.org/bar.html</span> 执行下面的 JavaScript 代码:</p>
<pre class="brush: js line-numbers language-js"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">replaceState</span><span class="punctuation token">(</span>stateObj<span class="punctuation token">,</span> <span class="string token">""</span><span class="punctuation token">,</span> <span class="string token">"bar2.html"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
<p>这会让URL栏显示 <span class="nowiki">http://mozilla.org/bar2.html</span>, 但是不会刷新 <code>bar2.html</code> 页面 甚至不会检查bar2.html 是否存在</p>
<p>假设用户跳转到 <span class="nowiki">http://www.microsoft.com</span>, 然后点击返回按钮.这时, URL 栏将会显示 <span class="nowiki">http://mozilla.org/bar2.html 页面. 如果用户此时点击返回按钮, URL栏将会显示 http://mozilla.org/foo.html 页面, 最终绕过了 bar.html 页面.</span></p>
<h2 id="说明">说明</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName("HTML WHATWG", "browsers.html#history", "History")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td>No change from {{SpecName("HTML5 W3C")}}.</td>
</tr>
<tr>
<td>{{SpecName("HTML5 W3C", "browsers.html#history", "History")}}</td>
<td>{{Spec2("HTML5 W3C")}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.History.replaceState")}}</p>
|
