English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5Verwendung des Historien-API, Online-Beispiel-Demonstration HTML5Wie das Historien-API verwendet wird, die Kompatibilität des Browsers, die Syntaxdefinition und die detaillierten Informationen zu seinen Attributwerten.
HTML5Das Historien-API ermöglicht es Ihnen, den Browser-Navigationsverlauf über JavaScript zu erreichen. HTML5Das Historien-API ist in Single-Page-Web-Anwendungen sehr nützlich. Single-Page-Web-Anwendungen können HTML5Das Historien-API, um einen bestimmten Zustand in der Anwendung "markierbar" zu machen. Später werde ich zurückkommen, wie man den Historien-API in einer Single-Page-Anwendung einen markierbaren Zustand erstellt.
Die Browsenachricht besteht aus einer Reihe von URLs. Jedes Mal, wenn der Benutzer auf derselben Website surft, wird die URL der neuen Seite auf dem oberen Teil des Stapels platziert. Wenn der Benutzer auf die Schaltfläche "Zurück" klickt, bewegt sich der Zeiger im Stapel zu dem vorherigen Element. Wenn der Benutzer dann auf die Schaltfläche "Vorward" klickt, bewegt sich der Zeiger nach oben zum obersten Element des Stapels. Wenn der Benutzer auf "Zurück" klickt und dann auf einen neuen Link klickt, wird das oberste Element des Stapels durch die neue URL ersetzt.
Dies ist ein Beispiel für den Historienverlauf:
http://myapp.com/great-new-story.html http://myapp.com/news.html http://myapp.com
Die letzte Seite, die im Historienverlauf besucht wurde, ist http://myapp.com/great-new-story.html. Wenn der Benutzer auf die Schaltfläche "Zurück" klickt, bewegt sich der Zeiger im Historienverlauf zurück http://myapp.com/news.html. Wenn der Benutzer auf die Schaltfläche "Vorward" klickt, bewegt sich der Zeiger im Historienverlauf http://myapp.com/great-new-story.html，wenn der Benutzer auf einen anderen Link (auf http://myapp.com/news.html-Seite)，dann wird die URL des Links http://myapp.com/news.html überdeckt im Historienverlauf.
HTML5Die Historien-API ermöglicht Webanwendungen den Zugriff auf den Historienverlauf.
HTML5Die Historien-API erlaubt Webseiten nur den Zugriff auf einen Teil des Browsen-Historiens, der im gleichen Domänennamen wie die Webseite liegt. Aus Sicherheitsgründen ist diese Einschränkung in der Historien-API erforderlich, sodass Webseiten nicht sehen können, welche anderen Websites der Benutzer besucht hat.
Gleichzeitig, HTML5Die Historien-API erlaubt Webseiten nicht, URLs in den Historienverlauf zu pusten, die nicht im gleichen Domänennamen wie die Webseite liegen. Diese Einschränkung stellt sicher, dass die Webseite nicht vortäuschen kann, dass der Benutzer zu Paypal weitergeleitet wurde und seinen Benutzernamen abhört, wenn der Benutzer mit der Eingabe der Webseite beginnt/Passwörter usw.
Sie können den Historienverlauf über das history-Objekt abrufen, das im JavaScript als globaler Objekt verwendet werden kann (es ist tatsächlich window.history).
Der history-Objekt enthält folgende Funktionen-Enthält die Historien-API:
back()
forward()
go(index)
pushState(stateObject, title, url)
replaceState(stateObject, title, url)
Die Funktion back() bewegt den Historienverlauf zurück zum vorherigen URL. Der Aufruf von back() hat die gleiche Wirkung wie das Klicken auf den "Zurück"-Knopf des Browsers.
Die Funktion forward() bewegt den Historienverlauf zum nächsten Seite im Historienverlauf. Der Aufruf von forward() hat die gleiche Wirkung wie das Klicken auf den "Weiter"-Knopf im Browser. Es ist nur bei einem Aufruf der Funktion oder einem Klick auf den "Zurück"-Knopf möglich. Wenn der Historienverlauf bereits auf die neueste URL im Historienverlauf zeigt, gibt es keine Möglichkeit vorwärts zu navigieren.
Die Funktion go(index) bewegt den Historienverlauf nach vorne oder zurück, basierend auf dem Index, den Sie der Funktion go() als Parameter übergeben. Wenn Sie go() mit einem negativen Index aufrufen (z.B. go(-1))1))). Der Index zeigt den Schritt im Historienverlauf an, den Sie im Browserhistorienverlauf vorwärts oder rückwärts navigieren möchten, zum Beispiel1,2,-1,-2usw.
Die Funktion pushState(stateObject, title, url) sendet eine neue URL an den Historienverlauf. Diese Funktion hat drei Parameter. Der Parameter url ist die URL, die in den Historienverlauf gepusht wird. Der Parameter title wird in der Regel vom Browser ignoriert. Der stateObject ist der, der mit dem neuen URL in den Historienverlauf gepusht wird, und wird mit dem Ereignis weitergegeben. Der stateObject kann jede Art von Daten enthalten, die Sie wünschen. Es ist nur ein JavaScript-Objekt.
Die Funktion replaceState(stateObject, title, url) funktioniert ähnlich wie die Funktion pushState(), indem sie jedoch den aktuellen Element im Historienverlauf durch eine neue URL ersetzt. Das aktuelle Element muss nicht das wichtigste Element sein. Dies ist das aktuelle Element, das sich in der Liste befinden kann, wenn back(), forward() und go() auf das history-Objekt aufgerufen wurden.
Jetzt sehen wir uns an, wie man mit HTML5Beispiel für die Historien-API.
Lassen Sie uns zunächst sehen, wie Sie mit den Funktionen back() und forward() im Historienverlauf hin- und her navigieren können:
history.back(); history.forward();
Denken Sie daran, dass das history-Objekt im window-Objekt liegt, daher können Sie auch schreiben:
window.history.back(); window.history.forward();
Da das window-Objekt jedoch das Standardobjekt ist, kann es weggelassen werden. Im Verlauf dieses Tutorials werde ich das Objekt window ignorieren.
Behalten Sie im Auge, dass Sie in den Historienverlauf nicht wechseln können, es sei denn, Sie (oder der Benutzer) navigieren zuvor zurück im Historienverlauf.
Lassen Sie uns nun sehen, wie Sie mit der Funktion go() Aktionen wie back() und forward() ausführen können. Zunächst ist dies der Befehl, um mit go() einen Schritt zurückzugehen:
history.go();-1);
Um zwei Schritte zurückzugehen, können Sie-2Die Parameter werden wie folgt an die Funktion go() übergeben:
history.go();-2);
Ebenso können Sie positive Indizes an die Funktion go() übergeben, um den Historienverlauf voranzubringen. Hier sind zwei Beispiele, bei denen zwei Schritte nach vorne und zwei Schritte nach hinten vorangeschritten werden:
history.go();1); history.go();2);
Natürlich wird der Browserverlauf um eine Position weitergeleitet, wenn Sie beide Zeilen gleichzeitig ausführen.3Schritte.
Um den Zustand in den Historienverlauf zu übertragen, rufen Sie die Funktion pushState() des history-Objekts auf. Hier ist ein Beispiel für pushState():
var state = {};
var title = "";
var url = "next"-page.html";
history.pushState(state, title, url);Dieser Beispielcode fügt den neuen URL in den Historienverlauf hinzufügt. Dies wird auch die URL im Adressfeld des Browsers ändern, führt jedoch nicht dazu, dass der Browser versucht, diese URL zu laden.
Die Funktion replaceState() ersetzt das aktuelle history-Element im historischen Stapel. Wenn der Benutzer es mit dem "Zurück"-Button in den Historienverlauf zurückgeht, könnte dies nicht das wichtigste Element sein. Dies ist ein Beispiel für replaceState():
var state = {};
var title = "";
var url = "another";-page.html";
history.replaceState(state, title, url);Der Ersatz des Zustands ändert auch die URL im Adressfeld des Browsers, lädt jedoch den URL nicht. Die Seite mit dem ersetzenen URL bleibt im Browser.
HTML5Das Historien-API ermöglicht es Webseiten, Änderungen im Browserhistorienverlauf zu überwachen. Sicherheitsbeschränkungen gelten ebenfalls, daher werden keine Änderungen des Historienverlaufs, die die URL aus dem Domainbereich der Webseite hinausgehen, an die Webseite gemeldet.
Um Änderungen im Browserhistorienverlauf zu überwachen, stellen Sie einen Abhörer für onpopstate auf dem window-Objekt ein. Dies ist ein Beispiel für einen Browserhistorienverlaufs-Abhörer:
window.onpopstate = function(event) {
console.log("Historienverlauf geändert zu:") + document.location.href);
}Der onpopstate-Event-Handler wird aufgerufen, wenn im Browserhistorienverlauf Änderungen auf derselben Seite vorgenommen werden (Browserhistorie, Seite wird in den Historienverlauf gepusht). Die Reaktion auf Historienänderungsevents kann die Extraktion von Parametern aus der URL und das Laden des entsprechenden Inhalts auf der Seite sein (z.B. durch AJAX).
Hinweis: Nur Änderungen, die durch Klick auf die "Zurück"- oder "Vorward"-Schaltflächen oder die entsprechenden Historiennavigationsfunktionen back(), forward() und go() verursacht werden, führen dazu, dass der onpopstate-Event-Abhörer aufgerufen wird. Der Aufruf der Funktionen pushState() und replaceState() löst keine Änderung des Historienverlaufs aus.
Wenn ein neuer URL in den Historienverlauf gelegt wird, wird die URL im Adressfeld des Browsers auf den neuen URL geändert. Der Browser versucht jedoch nicht, diesen URL zu laden. Er zeigt nur die URL an und legt sie in den Stack, so als ob der Browser die Seite besucht hätte, aber die Seite mit dem neuen Zustand bleibt im Browser.
Das Pushen eines neuen URLs in den Historienverlauf ist eine nützliche Methode, um einen bestimmten Zustand in einer Single-Page-Anwendung (SPA) hinzuzufügen, der als Lesezeichen markiert werden kann. Zum Beispiel könnte die URL der Anwendung in einem Single-Page-Online-Shop so aussehen:
http://myshop.com
Diese Anwendung könnte möglicherweise Produkte auf einer Seite für den Benutzer anzeigen, aber wie kann der Benutzer einen Link zu einem bestimmten Produkt an Freunde senden?
Die Lösung ist, dass beim Laden eines neuen Produkts die Single-Page-Anwendung die neue URL in den Historienverlauf schiebt. Dies führt nicht zur Lade des neuen URL, macht die neue URL jedoch im Adressfeld des Browsers sichtbar. Von dort kann sie als Lesezeichen hinzugefügt oder in E-Mails und anderen Medien kopiert und eingefügt werden. Hier ist ein Beispiel für eine solche URL, die als Lesezeichen hinzugefügt werden kann:}}
http://myshop.com?productId=234
oder vielleicht eine URL mit besserer Lesbarkeit:
http://myshop.com/produkte/234
oder eine Version, die etwas mehr als REST ist (und auch Produkttypen erwähnt):
http://myshop.com/produkte/books/234
Nachdem die URL in das Browsverlaufsgeschichte eingefügt wurde, lädt die Webshop-Seite das entsprechende Produkt über AJAX und zeigt es dem Benutzer an.
Wenn der Benutzer auf den "Zurück"-Knopf klickt, wird der onpopstate-Event-Handler aufgerufen. Dann sollte die Webseite überprüfen, was der neue URL ist, und wenn die URL zurückkehrt, wird die Startseite des Produkts oder der Anwendung mit dieser URL geladen, http://myshop.com。
Dies ist ein HTML5Ein Beispielcode, der die Prinzipien der Verwendung von AJAX zur Laden von Daten in den Browser zeigt:
<a href="javascript:push('http://myshop.com/books/123');">
Buch 123
</a> <br/>
<a href="javascript:push('http://myshop.com/apps/456');">
App 456
</a>
<script>
function loadUrl(url) {
console.log("loading data from url: " + url);
}
function push(url) {
history.pushState(null, null, url);
loadUrl(url);
}
window.onpopstate = function(event) {
console.log("history changed to: " + document.location.href);
loadUrl(document.location.href);
}
</script>Dieses Beispiel enthält zwei Links mit JavaScript Click-Event-Listenern. Nach dem Klicken auf einen der Links wird die entsprechende URL in den Historienverlauf gestößt und im Browser geladen.
Dieser Beispiel enthält auch einen onpopstate-Event-Listener. Wenn der Benutzer auf die "Zurück"- oder "Vorwärts"-Schaltfläche klickt, lädt dieser Event-Listener die URL in das Adressfeld des Browsers, das derzeit angezeigt wird.
Wenn der Benutzer auf den Link klickt und "Zurück" /Wenn der "Vorwärts"-Knopf gedrückt wird, wird das angezeigte Beispiel aktiviert. Aber was ist, wenn der Benutzer die URL an einen Freund sendet oder sie als Lesezeichen hinzufügt und später darauf zugreift?
Wenn der Benutzer versucht, auf eine getaggte URL zuzugreifen, http://myshop.com/books/123dann wird der Browser den Webserver um die URL anfordern. Der Webserver muss wissen, dass er die gleiche Single-Page-Anwendung senden muss, die vom URL zurückgesendet wurde http://myshop.com. Sie müssen den Webserver konfigurieren, um dies zu tun.
Ebenso muss eine Single-Page-Webanwendung die URL überprüfen, die beim ersten Laden verwendet wurde, und diese URL verwenden, um zu bestimmen, welche Inhalte geladen und angezeigt werden sollen. Daher, wenn eine Single-Page-Anwendung URL geladen hat, dann myshop.com/books/123Diese Anwendung sollte das entsprechende Produkt laden und es anzeigen. Diese URL-Prüfung muss während der Initialisierung der Single-Page-Anwendung durchgeführt werden.
Bei der Erstellung dieses Artikels unterstützen alle modernen Browser (IE, Safari, Chrome, Firefox) außer Opera Mini HTML5Historien-API.