![](\"https:\/\/planeta21vek.ru\/elina732\/wp-content\/uploads\/2024\/11\/okno081124.jpg\")
<\/p>\nMit pushState() k\u00f6nnen Sie den Referrer \u00e4ndern, der im HTTP-Header f\u00fcr XMLHttpRequest-Objekte verwendet wird, die nach der Status\u00e4nderung erstellt wurden. Der Wert von referrer ist die URL des Dokuments, dessen Fenster zum Zeitpunkt der Erstellung des XMLHttpRequest-Objekts dieses ist.<\/p>\n
<\/p>\n
pushState() erstellt einen neuen Eintrag im Browserverlauf, sodass Sie mit der Zur\u00fcck-Schaltfl\u00e4che zu vorherigen Seiten zur\u00fcckkehren k\u00f6nnen. Inzwischen Geschichte. replaceState() ersetzt den aktuellen Eintrag und verhindert so die M\u00f6glichkeit, \u00fcber den Zur\u00fcck-Button zur vorherigen URL zur\u00fcckzukehren.<\/p>\n
<\/p>\n
Angenommen, der folgende JavaScript-Code wird auf der Seite http:\/\/x.org\/foo.html ausgef\u00fchrt:<\/p>\n
\r\njs\r\nCopy to Clipboard\r\nlet stateObj = {\r\n foo: "bar",\r\n};\r\nhistory.pushState(stateObj, "page 2", "bar.html");\r\n<\/pre>\nDies f\u00fchrt dazu, dass http:\/\/x.org\/bar.html in der URL-Leiste angezeigt wird, der Browser die Seite bar.html jedoch nicht l\u00e4dt und nicht einmal pr\u00fcft, ob sie existiert.<\/p>\n
Nehmen wir nun an, der Nutzer navigiert zu http:\/\/google.com und klickt dann auf die Schaltfl\u00e4che \u201eZur\u00fcck\u201c. Als Ergebnis zeigt die URL http:\/\/x.org\/bar.html an und History.state enth\u00e4lt stateObj. Das Popstate-Ereignis wird nicht ausgel\u00f6st, da die Seite neu geladen wurde. Die Seite selbst sieht wie bar.html aus.<\/p>\n
Wenn der Benutzer erneut auf die Schaltfl\u00e4che \u201eZur\u00fcck\u201c klickt, \u00e4ndert sich die URL in http:\/\/x.org\/foo.html und das Dokument l\u00f6st erneut ein Popstate-Ereignis aus, diesmal mit dem Statusobjekt, das auf Null gesetzt ist. In diesem Fall \u00e4ndert das Zur\u00fcckgehen auch nicht den Inhalt des Dokuments, wie im vorherigen Schritt, obwohl das Dokument selbst seinen Inhalt nach dem Empfang des Popstate-Ereignisses aktualisieren kann.<\/p>\n
Die pushState()-Methode ben\u00f6tigt drei Parameter: ein Statusobjekt, einen Header (vorerst ignoriert) und einen (optionalen) \u201eURL\u201c-Parameter.<\/strong><\/p>\nstate object. Das Statusobjekt ist ein JavaScript-Objekt, das dem neuen Verlaufseintrag zugeordnet ist, der von pushState() erstellt wurde. Immer wenn der Benutzer zu einem neuen Status navigiert, tritt das Popstate-Ereignis auf und die Statuseigenschaft des Ereignisses enth\u00e4lt eine Kopie des Statusobjekts mit Verlaufseintr\u00e4gen.<\/p>\n
Ein Statusobjekt kann alles sein, was serialisiert werden kann. Da Firefox Statusobjekte auf der Festplatte des Benutzers speichert, damit sie nach dem Neustart des Browsers wiederhergestellt werden k\u00f6nnen, begrenzen wir die serialisierte Darstellung des Statusobjekts auf 640 KB. Wenn Sie ein Statusobjekt \u00fcbergeben, dessen serialisierte Darstellung gr\u00f6\u00dfer als dieser Wert ist, l\u00f6st die Methode pushState() eine Ausnahme aus. Wenn Sie gr\u00f6\u00dferen Speicher ben\u00f6tigen, sollten Sie die Verwendung von sessionStorage und\/oder localStorage in Betracht ziehen.<\/p>\n
title. Header \u2013 Alle Browser au\u00dfer Safari ignorieren diese Einstellung vorerst, werden dies aber m\u00f6glicherweise in Zukunft tun. Aufgrund zuk\u00fcnftiger \u00c4nderungen an der Methode besteht eine sichere L\u00f6sung darin, einen leeren String zu \u00fcbergeben. Alternativ k\u00f6nnen Sie einen kurzen Header f\u00fcr den Status \u00fcbergeben, in den Sie wechseln.<\/p>\n
URL. Dieser Parameter \u00fcbergibt die URL eines neuen neuen Eintrags im Verlauf. Beachten Sie, dass der Browser nicht sofort nach dem Aufruf von pushState() versucht, die angegebene URL zu laden, sondern m\u00f6glicherweise sp\u00e4ter versucht, dies zu tun, beispielsweise nachdem der Benutzer den Browser neu gestartet hat. Die neue URL muss nicht absolut sein; Wenn es relativ ist, wird es relativ zur aktuellen URL definiert. Die neue URL muss auf dieselbe Dom\u00e4ne, dasselbe Protokoll und denselben Port verweisen, andernfalls l\u00f6st pushState() eine Ausnahme aus. Dieser Parameter ist optional; Wenn nicht angegeben, wird die URL des aktuellen Dokuments verwendet.<\/p>\n\n
Der Aufruf von pushState() \u00e4hnelt in gewisser Weise dem Festlegen von window.location = \u201e#foo\u201c, da beide auch einen weiteren Verlaufseintrag erstellen und aktivieren, der mit dem aktuellen Dokument verkn\u00fcpft ist.<\/p>\n
Aber pushState() hat mehrere Vorteile:<\/p>\n
Die neue URL kann eine beliebige URL innerhalb derselben Dom\u00e4ne, desselben Ports und Protokolls wie die aktuelle Adresse sein. Beim Festlegen von window.location bleiben Sie hingegen nur dann im selben Dokument, wenn Sie nur den Hash \u00e4ndern. Eine \u00c4nderung der URL ist nicht erforderlich. W\u00e4hrend die Einstellung window.location = „#foo“; erstellt nur dann einen neuen Eintrag im Verlauf, wenn der aktuelle Hash nicht #foo ist<\/p>\n
Alle Daten k\u00f6nnen mit einem neuen Eintrag im Verlauf verkn\u00fcpft werden. Beim Hash-basierten Ansatz m\u00fcssen alle relevanten Daten in einen kurzen String kodiert werden. Wenn der Titelheader anschlie\u00dfend von Browsern verwendet wird, k\u00f6nnen diese Daten verwendet werden (unabh\u00e4ngig beispielsweise vom Hash). Beachten Sie, dass pushState() niemals das Hashchange-Ereignis ausl\u00f6st, selbst wenn sich die neue URL nur im Hash von der alten unterscheidet.<\/p>\n
In XUL-Dokumenten wird das angegebene XUL-Element erstellt. In anderen Dokumenten wird ein Element mit einem Null-Namespace-URI erstellt.<\/p>\n
replaceState()-Methode. History.replaceState() funktioniert genauso wie History.pushState(), au\u00dfer dass replaceState() den aktuellen Verlaufseintrag \u00e4ndert, anstatt einen neuen Eintrag zu erstellen. Beachten Sie, dass dadurch nicht verhindert wird, dass ein neuer Eintrag im globalen Verlauf des Browsers erstellt wird.<\/strong><\/p>\nreplaceState() ist besonders n\u00fctzlich, wenn Sie das Statusobjekt oder die URL des aktuellen Verlaufseintrags als Reaktion auf eine Benutzeraktion aktualisieren m\u00f6chten.<\/p>\n
Angenommen, der folgende JavaScript-Code wird auf der Seite http:\/\/x.org\/foo.html ausgef\u00fchrt:<\/p>\n
\r\nlet stateObj = { foo: "bar" };\r\nhistory.pushState(stateObj, "page 2", "bar.html");\r\n<\/pre>\nEine Erkl\u00e4rung dieser beiden Zeilen finden Sie im obigen Beispiel f\u00fcr die Methode pushState().<\/p>\n
Nehmen wir als N\u00e4chstes an, dass JavaScript-Code auf der Seite http:\/\/x.org\/bar.html ausgef\u00fchrt wird:<\/p>\n
\r\nhistory.replaceState(stateObj, "page 3", "bar2.html");\r\n<\/pre>\nDies f\u00fchrt dazu, dass http:\/\/x.org\/bar2.html in der URL-Leiste angezeigt wird, der Browser jedoch nicht sofort bar2.html l\u00e4dt oder gar pr\u00fcft, ob diese Seite bar2.html vorhanden ist.<\/p>\n
Nehmen wir nun an, der Benutzer geht zu http:\/\/www.microsoft.com und klickt dann auf die Schaltfl\u00e4che \u201eZur\u00fcck\u201c. In diesem Fall wird http:\/\/x.org\/bar2.html in der URL-Leiste angezeigt. Wenn der Benutzer erneut auf die Schaltfl\u00e4che \u201eZur\u00fcck\u201c klickt, zeigt die URL-Leiste http:\/\/x.org\/foo.html an und umgeht bar.html vollst\u00e4ndig.<\/p>\n
Popstate-Ereignis. Das Popstate-Ereignis wird im Fenster immer dann ausgel\u00f6st, wenn sich der aktive Verlaufseintrag \u00e4ndert. Wenn der zu aktivierende Verlaufseintrag durch einen Aufruf von pushState erstellt oder durch einen Aufruf von replaceState aktiviert wurde, enth\u00e4lt die Eigenschaft \u201estate\u201c des Ereignisses \u201epopstate\u201c eine Kopie des Verlaufseintrags des Ereignisobjekts.<\/strong><\/p>\nWenn eine Seite geladen wird, verf\u00fcgt sie m\u00f6glicherweise \u00fcber ein Ereignisobjekt mit einem anderen Wert als \u201enull\u201c. Dies kann beispielsweise passieren, wenn die Seite ein Statusobjekt setzt (mithilfe von pushState() oder replaceState()) und der Benutzer dann den Browser neu startet. Wenn die Seite neu geladen wird, empf\u00e4ngt sie das Onload-Ereignis, jedoch nicht das Popstate-Ereignis. Wenn Sie jedoch die Eigenschaft \u201ehistory.state\u201c lesen, erhalten Sie das Statusobjekt, das Sie erhalten h\u00e4tten, wenn das Popstate-Ereignis aufgetreten w\u00e4re.<\/p>\n
Mit der Eigenschaft \u201ehistory.state\u201c k\u00f6nnen Sie beispielsweise den Status des aktuellen History-Eintrags lesen, ohne auf das Popstate-Ereignis warten zu m\u00fcssen:<\/p>\n
\r\nlet currentState = history.state;\r\n<\/pre>\n\n","protected":false},"excerpt":{"rendered":"Mit pushState() k\u00f6nnen Sie den Referrer \u00e4ndern, der im HTTP-Header f\u00fcr XMLHttpRequest-Objekte verwendet wird, die nach der Status\u00e4nderung erstellt wurden. Der Wert von referrer ist die URL des Dokuments, dessen Fenster zum Zeitpunkt der Erstellung des XMLHttpRequest-Objekts dieses ist.<\/p>\n","protected":false},"author":1,"featured_media":235,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,111,7],"tags":[115,112,113,114],"class_list":{"0":"post-234","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-htmlverstka","8":"category-javascript","9":"category-programmirovanie","10":"tag-onpopstate","11":"tag-pushstate","12":"tag-replacestate","13":"tag-url"},"_links":{"self":[{"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/posts\/234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/comments?post=234"}],"version-history":[{"count":3,"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/posts\/234\/revisions"}],"predecessor-version":[{"id":275,"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/posts\/234\/revisions\/275"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/media\/235"}],"wp:attachment":[{"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/media?parent=234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/categories?post=234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/tags?post=234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}