---
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>