---
title: Manipulieren des Browser-Verlaufes
slug: Web/API/History_API
tags:
  - Verlauf
translation_of: Web/API/History_API
original_slug: Web/Guide/DOM/Manipulating_the_browser_history
---
<p>Das DOM {{ domxref("window") }} Objekt stellt Zugriffsmöglichkeiten auf den Browser-Verlauf über das {{ domxref("window.history", "history") }} Objekt bereit. Es bietet nützliche Methoden und Einstellungen, die es ermöglichen, den Zurück- und Vorwärts-Button und den Browser-Verlauf zu steuern und – seit HTML5 – diesen auch zu manipulieren</p>

<h2 id="Durch_den_Verlauf_gehen">Durch den Verlauf gehen</h2>

<p>Um durch den Verlauf des Benutzers zu gehen gibt es die Methoden <code>back()</code>, <code>forward()</code> und <code>go()</code>.</p>

<h3 id="Vor_und_zurück_bewegen">Vor und zurück bewegen</h3>

<p>Um im Verlauf zurück zu navigieren, nutze:</p>

<pre class="brush: js">window.history.back();
</pre>

<p>Dies hat denselben Effekt, wie wenn der Benutzer den Zurück-Knopf drückt.</p>

<p>Auf ähnliche Weise kann so vorwärts navigiert werden: </p>

<pre class="brush: js">window.history.forward();
</pre>

<h3 id="An_einen_bestimmten_Punkt_im_Verlauf_springen">An einen bestimmten Punkt im Verlauf springen</h3>

<p>Mit der Methode <code>go()</code> ist es möglich, eine spezifische Seite aus dem Verlauf zu laden, welche relativ zur momentanen Seite im Verlauf steht. Die aktuelle Seite hat hierbei natürlich Index 0.</p>

<p>Um eine Seite rückwärts zu gehen (äquivalent zu <code>back()</code>):</p>

<pre class="brush: js"><code>window.history.go(-1);</code>
</pre>

<p>Um eine Seite vorwärts zu gehen (äquivalent zu <code>forward()</code>):</p>

<pre class="brush: js"><code>window.history.go(1);</code>
</pre>

<p>Gleichermassen ist es möglich, 2 Seiten vorwärts mit <code>go(2)</code> zu gehen, 3 rückwärts mit <code>go(-3)</code> und so weiter.</p>

<p>Die Anzahl der Seiten im history-Stapel kann mithilfe der Eigenschaft <code>length</code> bestimmt werden:</p>

<pre class="brush: js">var <code>numberOfEntries</code> = window.history.length;
</pre>

<div class="note"><strong>Anmerkung:</strong> Der Internet Explorer unterstützt das Übergeben von String URLs als Parameter für <code>go()</code>; dies ist nicht standardisiertes Verhalten und wird von Gecko nicht unterstützt.</div>

<h2 id="Hinzufügen_und_Ändern_von_Verlaufseinträgen">Hinzufügen und Ändern von Verlaufseinträgen</h2>

<p>{{ gecko_minversion_header("2") }}</p>

<p>Mit HTML5 wurden die Methoden <code>history.pushState()</code> und <code>history.replaceState()</code> eingeführt, welche jeweils das Hinzufügen und die Manipulation von Verlaufseinträgen ermöglichen. Diese stehen in Verbindung mit dem {{ domxref("window.onpopstate") }}-Event.</p>

<p>Wenn <code>history.pushState()</code> benutzt wird, ändert das den Referrer der als HTTP-Header in danach erstellten <a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a>-Objekten genutzt wird. Der Referrer wird die URL des Dokumentes sein, dessen Fenster <code>this</code> zur Zeit der Erstellung des <a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a>-Objektes ist.</p>

<h3 id="Beispiel_für_die_pushState()-Methode">Beispiel für die pushState()-Methode</h3>

<p>Angenommen, <span class="nowiki">http://mozilla.org/foo.html</span> führt folgendes JavaScript aus:</p>

<pre class="brush: js">var stateObj = { foo: "bar" };
history.pushState(stateObj, "seite 2", "bar.html");
</pre>

<p>Das ändert die angezeigte URL zu <span class="nowiki">http://mozilla.org/bar.html</span>, bringt den Browser aber nicht dazu, <code>bar.html</code> zu laden oder überhaupt dessen Existenz zu überprüfen.</p>

<p>Man nehme weiter an, der Benutzer navigiert zu http://google.com und klickt dann Zurück. Zu diesem Zeitpunkt wird die URL-Bar http://mozilla.org/bar.html anzeigen, und die Seite erhält ein <code>popstate</code>-Event mit einem <em>Status-Objekt</em>, das eine Kopie von <code>stateObj</code> darstellt. Die Seite selbst wird aussehen wie <code>foo.html</code>, aber während dem <code>popstate</code>-Event kann der Inhalt bearbeitet worden sein.</p>

<p>Wenn der Benutzer noch einmal Zurück drückt, ändert sich die URL zu <span class="nowiki">http://mozilla.org/foo.html</span>, und die Seite erhält ein weiteres <code>popstate</code>-Event, dieses Mal mit einem <code>null</code> <em>Status-Objekt</em>. Auch hier wird der Inhalt der Seite nicht geändert, wenn das nicht manuell im <code>popstate</code>-Event vollzogen wird.</p>

<h3 id="Die_pushState()-Methode">Die pushState()-Methode</h3>

<p><code>pushState()</code> übernimmt drei Parameter: ein <em>state</em> Objekt, einen <em>title</em> (welcher aktuell noch ignoriert wird), und (optional) eine <em>URL</em>. Betrachten wir die einzelnen Parameter genauer:</p>

<ul>
 <li>
  <p><strong>state-Objekt</strong> — Das Status-Objekt ist ein JavaScript-Objekt, das mit dem per <code>pushState()</code> neu erzeugten history-Eintrag verknüpft ist. Jedesmal wenn der Benutzer zu diesem neuen Status navigiert, wird ein <code>popstate</code>-Event ausgelöst. Die <code>state</code>-Eigenschaft des Events enthält dabei eine Kopie des Status-Objektes des history-Eintrages.<br>
   <br>
   Das Status-Objekt kann alles sein, was sich serialisieren lässt. Weil Firefox state-Objekte auf dem Speicher den Nutzers ablegt, lassen sie sich auch wiederherstellen, nachdem der Nutzer seinen Browser neu gestartet hat, das serialisierte Abbild des Status-Objekt ist dabei auf 640k Zeichen begrenzt. Wird ein größeres Status-Objekt an <code>pushState()</code> übergeben, gibt die Methode eine <em>Exception</em> aus. Wenn mehr Speicherplatz benötigt wird, sollte <code>sessionStorage</code> und/oder <code>localStorage</code> verwendet werden.</p>
 </li>
 <li>
  <p><strong>title</strong> — Aktuell ignoriert Firefox diesen Parameter, wenngleich er in Zukunft verwendet werden könnte. Um gegenüber zukünftigen Änderungen abgesichert zu sein, empfiehlt sich, einen leeren String zu übergeben. Alternativ kann man hier einen kurzen Titel für den Status hinterlassen.</p>
 </li>
 <li>
  <p><strong>URL</strong> — Der neue history-Eintrag erhält mit diesem Parameter seine URL. Man beachte, dass der Browser nicht versuchen wird, nach einem Aufruf von <code>pushState()</code> diese URL zu laden, aber später dennoch versuchen könnte, beispielsweise nachdem der Nutzer seinen Browser neu gestartet hat. Die neue URL muss nicht absolute sein; wenn sie relativ ist, wird sie relativ zur aktuellen URL aufgelöst. Die neue URL muss denselben Ursprung haben wie die aktuelle, sonst gibt <code>pushState()</code> eine <em>Exception</em> zurück. Dieser Parameter ist optional; falls er übergeben wird, wird er auf die aktuelle URL des <em>documents</em> gesetzt.</p>
 </li>
</ul>

<div class="note"><strong>Anmerkung:</strong> In Gecko 2.0 {{ geckoRelease("2.0") }} bis Gecko 5.0 {{ geckoRelease("5.0") }} wird das übergebene Objekt mittels JSON serialisiert. Ab Gecko 6.0 {{ geckoRelease("6.0") }}, übernimmt der<a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm"> structured clone algorithm</a> die Serialisierung des Objekts. Dies erlaubt eine größere Vielfalt an Objekten, die sich sicher serialisieren lassen.</div>

<p>In gewissem Sinne ist der Aufruf von <code>pushState()</code> ähnlich dem Setzen von <code>window.location = "#foo"</code>, insofern beide einen weiteren history-Eintrag sowohl erzeugen als auch aktivieren, der mit dem aktuellen Document verbunden ist. Aber <code>pushState()</code> hat ein paar Vorteile:</p>

<ul>
 <li>Die neue URL kann irgendeine URL desselben Ursprungs sein wie die aktuelle URL.<br>
  Im Gegensatz dazu bleibt <code>window.location</code> nur dann im selben {{ domxref("document") }} selbst wenn man nur den <em>hash</em> ändert.</li>
 <li>Man muss nicht die URL ändern, wenn man nicht will. <br>
  Im Gegensatz dazu erzeugt <code>window.location = "#foo";</code> nur dann einen neuen history-Eintrag, wenn der aktuelle <em>hash</em> nicht <code>#foo</code> ist.
  <ul>
   <li>Es lassen sich auch willkürliche Daten mit dem neuen history-Eintrag verbinden. Mit dem <em>hash</em>-basierten Ansatz müssen alle relevanten Daten in einen kurzen String kodiert werden.</li>
  </ul>
 </li>
</ul>

<p>Man beachte, dass <code>pushState()</code> niemals das Auslösen eines <code>hashchange</code>-Events verursacht, selbst wenn sich die neue URL von der alten nur durch ihren <em>hash</em> unterscheidet.</p>

<h3 id="Die_replaceState()-Methode">Die replaceState()-Methode</h3>

<p><code>history.replaceState()</code> arbeitet genauso wie <code>history.pushState()</code>, abgesehen davon, dass <code>replaceState()</code> den aktuellen history-Eintrag verändert, statt einen neuen zu erzeugen.</p>

<p><code>replaceState()</code> ist insbesondere nützlich, um das <em>Status</em>-Objekt oder die URL des aktuellen history-Eintrages als Reaktion auf eine Benutzer-Aktion zu aktualisieren.</p>

<div class="note"><strong>Anmerkung:</strong> In Gecko 2.0 {{ geckoRelease("2.0") }} bis Gecko 5.0 {{ geckoRelease("5.0") }} wird das übergebene Objekt mittels JSON serialisiert. Ab Gecko 6.0 {{ geckoRelease("6.0") }}, übernimmt der<a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm"> structured clone algorithm</a> die Serialisierung des Objekts. Dies erlaubt eine größere Vielfalt an Objekten, die sich sicher serialisieren lassen.</div>

<h3 id="Beispiel_für_die_replaceState()-Methode">Beispiel für die replaceState()-Methode</h3>

<p>Angenommen, http://mozilla.org/foo.html führt folgendes JavaScript aus:</p>

<p> </p>

<pre class="brush: js"><code>var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");</code></pre>

<p>Die Erläuterung dieser beiden Zeilen findet sich in unter "Beispiel für die pushState()-Metode". Weiterhin nehme man an, http://mozilla.org/bar.html würde dieses JavaScript ausführen:</p>

<pre class="brush: js"><code>history.replaceState(stateObj, "page 3", "bar2.html");</code></pre>

<p>Dies lässt den Browser http://mozilla.org/bar2.html in der Adresszeile anzeigen, aber nicht <code>bar2.html</code> laden oder auch nur prüfen, ob <code>bar2.html</code> existiert.</p>

<p>Nehmen wir nun an, dass der Nutzer zu http://www.microsoft.com navigiert und dann auf den Zurück-Button des Browsers drückt. Dann wird die Adresszeile http://mozilla.org/bar2.html anzeigen. Drückt der Benutzer den Zurück-Button nun nochmals, zeigt die Adresszeile http://mozilla.org/foo.html und umgeht bar.html vollständig.</p>

<p> </p>

<h3 id="The_popstate_event">The popstate event</h3>

<p>A <code>popstate</code> event is dispatched to the window every time the active history entry changes. If the history entry being activated was created by a call to <code>pushState</code> or affected by a call to <code>replaceState</code>, the <code>popstate</code> event's <code>state</code> property contains a copy of the history entry's state object.</p>

<p>See {{ domxref("window.onpopstate") }} for sample usage.</p>

<h3 id="Reading_the_current_state">Reading the current state</h3>

<p>When your page loads, it might have a non-null state object.  This can happen, for example, if the page sets a state object (using <code>pushState()</code> or <code>replaceState()</code>) and then the user restarts her browser.  When your page reloads, the page will receive an <span style="font-family: courier new;">onload</span><span style="font-family: helvetica;"> event, but no <span style="font-family: courier new;">popstate</span> event.</span>  However, if you read the <span style="font-family: courier new;">history.state</span> property, you'll get back the state object you would have gotten if a <span style="font-family: courier new;">popstate</span> had fired.</p>

<p>You can read the state of the current history entry without waiting for a <code>popstate</code> event using the <code>history.state</code> property like this:</p>

<pre class="brush: js">var currentState = history.state;
</pre>

<h2 id="Examples">Examples</h2>

<p>For a complete example of AJAX web site, please see: <a href="/en-US/docs/DOM/Manipulating_the_browser_history/Example" title="/en-US/docs/DOM/Manipulating_the_browser_history/Example">Ajax navigation example</a>.</p>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>replaceState, pushState</td>
   <td>5</td>
   <td>{{ CompatGeckoDesktop("2.0") }}</td>
   <td>10</td>
   <td>11.50</td>
   <td>5.0</td>
  </tr>
  <tr>
   <td>history.state</td>
   <td>18</td>
   <td>{{ CompatGeckoDesktop("2.0") }}</td>
   <td>10</td>
   <td>11.50</td>
   <td>6.0</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>replaceState, pushState</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>history.state</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{ domxref("window.history") }}</li>
 <li>{{ domxref("window.onpopstate") }}</li>
</ul>

<p>{{ languages( { "ja": "ja/DOM/Manipulating_the_browser_history"} ) }}</p>