window.history.pushState Aktualisierung des Browsers

Question

Ich arbeite an etwas JavaScript-Code und window.History.pushState verwenden, um neue HTML Seiten zu laden, anstatt href Tags zu verwenden. Mein Code (funktioniert gut) sieht so aus.

window.History.pushState({urlPath:'/page1'},"",'/page1') 

seltsam, diese ausfällt, dh neu lädt der Browser

window.History.pushState({urlPath:'/page2.php'},"",'/page2.php') 

Aber diese arbeitet, Inhalt aktualisiert wird, Browser nicht aktualisiert! (Beachten Sie die URL absolut und nicht relativ)

window.History.pushState({urlPath:'www.domain.com/page2.php'},"",'www.domain.com/page2.php') 

Die documentation für window.History.pushState sagt, dass der dritte Parameter URL entweder absolut oder relativ sein kann -

URL - Die neue URL Geschichte Eintrag ist gegeben durch dieser Parameter. Hinweis , dass der Browser nicht versuchen wird, diese URL nach einem Aufruf pushstate() zu laden, aber es könnte versuchen, die URL später zu laden, zum Beispiel , nachdem der Benutzer des Browser neu gestartet. Die neue URL muss nicht absolut sein; Wenn es relativ ist, wird es relativ zur aktuellen URL aufgelöst. Die neue URL muss denselben Ursprung haben wie die aktuelle URL. Andernfalls wird pushState() eine Ausnahme auslösen. Dieser Parameter ist optional; Wenn es nicht angegeben ist, wird es auf die aktuelle URL des Dokuments festgelegt.

Absolute URLs scheinen zu arbeiten, aber relativ scheinen nicht zu sein. Warum passiert dies?

Answer 1

Die kurze Antwort ist, dass history.pushState (nicht History.pushState, die eine Ausnahme werfen würde, ist der window Teil optional) wird nie tun, was Sie vorschlagen.

Wenn Seiten erfrischend sind, dann ist es durch andere Dinge verursacht wird, die Sie tun (zum Beispiel könnten Sie haben Code ausgeführt wird, dass im Falle der Adressleiste an eine neue Position geht zu ändern).

history.pushState({urlPath:'/page2.php'},"",'/page2.php') funktioniert genau so, wie es in den neuesten Versionen von Chrome, IE und Firefox für mich und meine Kollegen soll.

In der Tat können Sie setzen, was Sie in die Funktion mag: history.pushState({}, '', 'So long and thanks for all the fish.not a real file').

Wenn Sie etwas mehr Code (mit besonderer Aufmerksamkeit für Code in der Nähe der history.pushState und überall document.location wird verwendet), dann sind wir mehr als glücklich, Ihnen helfen, herauszufinden, wo genau dieses Problem herkommt.

Wenn Sie mehr Code schreiben, werde ich diese Antwort aktualisieren (ich habe Ihre Frage favorisiert) :).

Answer 2

window.history.pushState({urlPath:'/page1'},"",'/page1') 

funktioniert nur nach Seite geladen wird, und wenn Sie auf Refresh klicken, wird es bedeutet nicht, dass es eine reale URL ist.

Was Sie hier tun sollten, ist zu wissen, auf welche URL Sie weitergeleitet werden, wenn Sie diese Seite neu laden. Und auf dieser Seite können Sie die Bedingungen erhalten, indem Sie die aktuelle URL erhalten und alle Ihre Bedingungen erfüllen.

Answer 3

Wie andere vorgeschlagen haben, sind Sie erklären nicht klar Ihr Problem, was Sie zu tun versuchen, oder was Ihre Erwartungen sind, was diese Funktion soll tatsächlich tun.

Wenn ich richtig verstanden habe, dann werden Sie diese Funktion erwartet die Seite zu aktualisieren für Sie (Sie eigentlich den Begriff „lädt erneut den Browser“).

Diese Funktion dient jedoch nicht dazu, den Browser neu zu laden.

Die Funktion besteht darin, dem Browserverlauf einen neuen "Status" hinzuzufügen (zu pushen), so dass der Benutzer in Zukunft in diesen Zustand zurückkehren kann, in dem sich die Webseite jetzt befindet.

Normalerweise wird dies in Verbindung mit AJAX-Aufrufen verwendet (die nur einen Teil der Seite aktualisieren).

Zum Beispiel, wenn ein Benutzer "CATS" in einem Ihrer Suchfelder sucht, und die Ergebnisse der Suche (vermutlich süße Bilder von Katzen) werden über AJAX zurück in die untere rechte Seite Ihrer Seite geladen - Dann wird Ihr Seitenstatus nicht geändert. Mit anderen Worten, in der nahen Zukunft, wenn der Benutzer entscheidet, dass er zu seiner Suche nach "CATS" zurückkehren will, wird er nicht in der Lage sein, weil der Staat in seiner Geschichte nicht existiert. Er kann nur zu Ihrem leeren Suchfeld zurückklicken.

Daraus ergibt sich die Notwendigkeit, dass die Funktion

history.pushState({},"Results for `Cats`",'url.html?s=cats'); 

Es wird als eine Möglichkeit, soll der Programmierer gezielt definieren seine Suche in der Benutzergeschichtspfad zu ermöglichen. Das ist alles, was es tun soll.

Wenn die Funktion ordnungsgemäß funktioniert, das einzige, was man erwarten sollte, ist die Adresse in der Adressleiste Ihres Browsers ändern, was auch immer Sie in Ihrer URL angeben.

Wenn Sie bereits das verstehen, dann sorry für diese lange Präambel. Aber es klingt von der Art, wie Sie die Frage stellen, die Sie nicht haben.

Als Neben Ich habe auch einige Widersprüche zwischen der Art und Weise, dass die Funktion in der Dokumentation beschrieben ist, und wie sie in der Realität funktionieren. Ich finde, dass es keine gute Idee ist, leere oder leere Werte als Parameter zu verwenden.

Siehe meine Antwort auf this SO question. Daher würde ich empfehlen, eine Beschreibung in Ihren zweiten Parameter einzugeben. Aus dem Speicher ist dies die Beschreibung, die der Benutzer in der Dropdown-Liste sieht, wenn er mit der Maus auf den "Zurück" -Knopf klickt.