diff options
Diffstat (limited to 'files/de/web/api/windoweventhandlers/onpopstate/index.html')
-rw-r--r-- | files/de/web/api/windoweventhandlers/onpopstate/index.html | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/files/de/web/api/windoweventhandlers/onpopstate/index.html b/files/de/web/api/windoweventhandlers/onpopstate/index.html new file mode 100644 index 0000000000..5154919751 --- /dev/null +++ b/files/de/web/api/windoweventhandlers/onpopstate/index.html @@ -0,0 +1,57 @@ +--- +title: WindowEventHandlers.onpopstate +slug: Web/API/WindowEventHandlers/onpopstate +translation_of: Web/API/WindowEventHandlers/onpopstate +--- +<div>{{APIRef}} {{gecko_minversion_header("2")}}</div> + +<h2 id="Summary" name="Summary">Zusammenfassung</h2> + +<p>Hier geht es um die Ereignisbehandlungsroutine, üblicherweise <em>event handler </em>genannt, für das <code>popstate</code> Ereignis (<em>event</em>) des <code>window</code> Objekts.</p> + +<p>Ein <code>popstate</code> Ereignis wird an <code>window</code> übermittelt, wann immer der aktive <code>history</code> Eintrag zwischen zwei Einträgen für dasselbe Dokument wechselt. Falls der zu aktivierende history Eintrag erzeugt wurde durch den Aufruf von <code>history.pushState()</code> oder beeinflusst wurde durch Aufruf von <code>history.replaceState(), </code>dann enthält die <code>state</code> Eigenschaft des <code>popstate</code> Ereignisses eine Kopie des <code>state</code> Objekts des <code>history</code> Eintrags.<code> </code></p> + +<p>Es gilt zu beachten, dass der bloße Aufruf von <code>history.pushState()</code> oder <code>history.replaceState()</code> kein <code>popstate</code> Ereignis auslöst. Das <code>popstate</code> Ereignis wird allein durch Anklicken des Zurück-Buttons (oder den Aufruf von <code>history.back()</code> per Javascript) ausgelöst. Auch wird das Ereignis nur ausgelöst, wenn sich der Anwender zwischen zwei <code>history </code>Einträgen für dasselbe Dokument bewegt.</p> + +<p>Browser behandeln den <code>popstate</code> Zustand nach initialem Laden einer Seite (<code>onload</code>) auf verschiedene Weise. Chrome (vor Version 34) und Safari senden immer ein <code>popstate</code> Ereignis, Firefox hingegen nicht.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">window.onpopstate = <var>funcRef</var>; +</pre> + +<ul> + <li><var>funcRef</var> ist eine <em>event</em> <em>handler</em> Funktion, bzw. Ereignisbehandlungsroutine.</li> +</ul> + +<h2 id="The_popstate_event" name="The_popstate_event">Das popstate Ereignis</h2> + +<p>Zum Beispiel würde eine Seite mit der URL <code><var>http://example.com/example.html</var></code> beim Durchlaufen dieses Codes die folgenden Meldungen in der Konsole ausgeben:</p> + +<pre class="brush:js">window.onpopstate = function(event) { + alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); +}; + +history.pushState({page: 1}, "title 1", "?page=1"); +history.pushState({page: 2}, "title 2", "?page=2"); +history.replaceState({page: 3}, "title 3", "?page=3"); +history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}" +history.back(); // alerts "location: http://example.com/example.html, state: null +history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3} +</pre> + +<p>Obwohl mit dem ursprünglichen <code>history</code> Eintrag (für die URL <code><var>http://example.com/example.html</var></code>) kein <code>state</code> Objekt verknüpft ist, wird dennoch ein <code>popstate</code> Ereignis ausgelöst, sobald dieser Eintrag durch den zweiten Aufruf von <code>history.back()</code> aktiv wird.</p> + +<h2 id="Specification" name="Specification">Spezifikation</h2> + +<ul> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#handler-window-onpopstate">HTML5 popstate event</a></li> +</ul> + +<h2 id="See_also" name="See_also">Weiterführende Informationen</h2> + +<ul> + <li>{{domxref("window.history")}}</li> + <li><a href="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history">Manipulating the browser history</a></li> + <li><a href="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example">Ajax navigation example</a></li> +</ul> |