So ändern Sie den Browser -Verlauf in komplexen HTML5- und JavaScript -Anwendungen

Liebst du nicht bissige Titel?! Betrachten Sie eine ausgeklügelte Anwendung wie den Webmail -Client. Im Wesentlichen handelt es sich um ein komplexes JavaScript -Programm, das auf einer einzigen HTML -Seite ausgeführt wird. Der Benutzer lädt die URL und wird mit einer Liste von E -Mails angezeigt. Sie klicken auf einen Titel und der E -Mail -Inhalt wird mit AJAX abgerufen und angezeigt. Sie möchten jetzt zur E -Mail -Liste zurückkehren. Was machen sie? ... … Klicken Sie auf die Schaltfläche "Rücken des Browsers". Knall. Die Anwendung schließt und kehrt zu der Seite zurück, die sie vor dem Zugriff auf die Anwendung angezeigt haben. Oder, wenn es sich um eine neue Registerkarte Browser handelt, ist die Back -Schaltfläche deaktiviert und kann nicht geklickt werden. Wir haben also ein Problem. Unser Webmail -Client unterstützt den einen Browser -Steuerelement nicht, den die meisten Benutzer verstehen. Es gibt Lösungen. Einige beinhalten die Änderung der Hash -Marke (#Name) in der URL, damit der Staat beibehalten werden kann. Es ist nicht perfekt, funktioniert aber in allen Browsern. Glücklicherweise wurde das Problem mit der HTML5 -Geschichte geleitet. und Geschichte. Replacestate -Methoden in Verbindung mit dem Fenster.onpopstate -Ereignis. Probieren Sie die History.pushstate () Demonstrationsseite… Die Technik ist erfrischend einfach:

1. Wenn sich der Zustand ändert, z. Der Benutzer öffnet eine E -Mail, historisch. Dies ermöglicht die Schaltfläche zurück, verschiebt den Benutzer jedoch - vor allem - nicht von der Seite.
2. Sie können historisch historisch ausführen.
Wenn der Benutzer zurückklickt (oder weiterleitet), wird das Ereignis von Fenster. Eine Handler -Funktion kann den zugehörigen Zustand abrufen und den entsprechenden Bildschirm anzeigen.
Der Nachteil? Vergessen Sie IE -Kompatibilität, bis V10 ankommt. Wenn Sie IE9 und unten unterstützen müssen, gibt es eine Reihe von Sehungen, einschließlich Geschichte.JS und HTML5-History-API . Schreiben wir Code. Angenommen, Sie haben gerade das Ergebnis einer AJAX -Anfrage angezeigt:

Wo:

// Ajax request
...
// display result
...

// modify history
history.pushState(obj, title, url);

obj ist ein JavaScript -Objekt. Sie können dies verwenden, um staatliche Informationen beizubehalten, z. {"Ansicht": "E -MailContent", "Element": 123};
• Titel ist ein optionaler Titel
• URL ist eine optionale URL. Die URL kann alles sein - der Browser springt nicht zu dieser Seite, aber könnte , wenn der Benutzer die Seite neu lädt oder seinen Browser neu gestartet hat. In den meisten Fällen möchten Sie Parameter oder einen Hash -Namen verwenden, z. ? Ansicht = E -Mail -Einführung & item = 123; Ihre Anwendung kann diese Werte beim Start analysieren und an denselben Ort zurückkehren.

History.Replacestate () hat identische Argumente und wird nur verwendet, wenn Sie den aktuellen Zustand durch einen neuen ersetzen möchten. Sie benötigen jetzt eine Handler -Funktion, die ausgeführt wird, wenn das Fenster Popstate -Ereignis dem Rücken des Browsers oder der nächsten Schaltfläche klickt:

// Ajax request
...
// display result
...

// modify history
history.pushState(obj, title, url);

Der URL -Standort kann mit document.location (document.location.search und document.location.hash ermittelt werden Geben Sie die Parameter bzw. Hash -Namen zurück). Das historische Zustandsobjekt, das von Pushstate () oder Ersatz () festgelegt wurde, wird aus der staatlichen Eigenschaft des Ereignisobjekts erhalten. Sie können die Informationen verwenden, um den entsprechenden Bildschirm anzuzeigen. Probieren Sie die History.pushstate () Demonstrationsseite… Klicken Sie ein paar Mal auf die Schaltfläche "History.Pushstate" und klicken Sie dann zurück, um zu sehen, was im Protokoll passiert. Sehr nützlich. Haben Sie Probleme mit der Rück- und nächsten Schaltfläche in Ihrer Webanwendung gestoßen?

häufig gestellte Fragen (FAQs) zu JavaScript History Pushstate

Was ist die Hauptfunktion des JavaScript -Verlaufs Pushstate? Es ist Teil der History -API und ermöglicht es Ihnen, Geschichteinträge hinzuzufügen. Dies ist besonders nützlich, wenn Sie eine einseitige Anwendung erstellen möchten, die die URL ändern kann, ohne die Seite neu zu laden. Es hilft bei der Aufrechterhaltung der Benutzererfahrung und des Status der Anwendung, selbst wenn der Benutzer die Vorwärts- und Rück- und Rückschaltflächen des Browsers durchnimmt. Durch die Einnahme von drei Parametern: ein Statusobjekt, ein Titel (der derzeit von den meisten Browsern ignoriert wird) und eine URL. Wenn die PushState -Methode aufgerufen wird, wird ein neuer History -Eintrag in den Geschichte des Browsers erstellt. Dieser neue Eintrag ist dem angegebenen Zustandsobjekt und der URL verbunden. Wenn der Benutzer zu diesem neuen Eintrag navigiert, wird das Popstate -Ereignis abgefeuert und das Statusobjekt wird an die Anwendung zurückgegeben. History Pushstate wird in allen modernen Browsern häufig unterstützt. Es wird jedoch in Internet Explorer 9 und früheren Versionen nicht unterstützt. Wenn Sie Anwendungen für ältere Browser entwickeln, müssen Sie möglicherweise eine Polyfill oder einen Fallback für Hash-basierte URLs verwenden.

Was ist der Unterschied zwischen Pushstate- und Ersatzmethoden in JavaScript? Der Hauptunterschied zwischen ihnen besteht darin, dass PushState einen neuen Verlaufseintrag erstellt und ihn zum Verlaufsstapel hinzufügt, während Austauschstat den aktuellen Verlaufseintrag ändert, ohne dem Stapel einen neuen hinzuzufügen. In JavaScript? Wenn der Verlauf von Pushstate erstellt wurde, wird das mit diesem Eintrag zugeordnete Zustandsobjekt an die Anwendung zurückgegeben. Sie können das Popstate -Ereignis verarbeiten, indem Sie dem Fensterobjekt einen Ereignishörer hinzufügen und eine Funktion definieren, die beim Abfeuern des Ereignisses ausgeführt wird. > Das Statusobjekt ist ein JavaScript -Objekt, das einem Verlaufseintrag zugeordnet ist. Dieses Objekt kann alle Arten von Daten enthalten, die Sie mit dem Verlaufseintrag in Verbindung bringen möchten. Wenn der Benutzer zum Verlauf navigiert, wird das Statusobjekt an die Anwendung übergeben, sodass Sie den Status der Anwendung wiederherstellen können. 🎜>

Ja, einer der Hauptvorteile bei der Verwendung von JavaScript -Verlaufstate besteht darin, dass Sie die URL ändern können, ohne die Seite neu zu laden. Dies ist besonders nützlich, wenn Sie eine einseitige Anwendung erstellen möchten, die die URL ändern kann, um den aktuellen Stand der Anwendung widerzuspiegeln. >

In einseitigen Anwendungen spielt der JavaScript-History Pushstate eine entscheidende Rolle bei der Aufrechterhaltung der Benutzererfahrung. Sie können die URL ändern, um den aktuellen Status der Anwendung widerzuspiegeln, ohne die Seite neu zu laden. Dies bedeutet, dass der Benutzer mit den Vorwärts- und Rückschaltflächen des Browsers durch die Anwendung navigieren kann, ohne den Anwendungszustand zu verlieren. Verwenden Sie JavaScript History Pushstate, um ein Navigationssystem zu erstellen, indem Sie für jede Navigationsaktion Historieneinträge hinzufügen. Wenn der Benutzer zu einem Verlaufseintrag navigiert, können Sie das mit diesem Eintrag zugeordnete Statusobjekt verwenden, um den Status der Anwendung wiederherzustellen. Auf diese Weise können Sie eine nahtlose Navigationserfahrung erstellen, ohne die Seite neu zu laden. Es hat einige Einschränkungen. Zum Beispiel wird es in Internet Explorer 9 und früheren Versionen nicht unterstützt. Außerdem kann es nur Verlaufseinträge für denselben Ursprung hinzufügen, was bedeutet, dass Sie es nicht verwenden können, um Verlaufseinträge für verschiedene Domänen hinzuzufügen.

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Browser -Verlauf in komplexen HTML5- und JavaScript -Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!