Schöne, glatte Seitenübergänge mit der History-Web-API

In diesem Tutorial erstellen wir eine Website mit reibungslosen Übergangsseiten ohne die übliche aggressive Seitenaktualisierung. Navigieren Sie durch die Seiten in der Demo, um zu sehen, was ich meine.

Um diesen Effekt zu erzielen, verwenden wir die History-Web-API. Kurz gesagt, diese API wird verwendet, um den Browserverlauf zu ändern. Es erlaubt uns, eine neue URL zu laden, den Seitentitel zu ändern und ihn gleichzeitig als neuen Besuch im Browser aufzuzeichnen, ohne die Seite tatsächlich laden zu müssen.

Dies klingt verwirrend, eröffnet jedoch eine Reihe von Möglichkeiten, z. B. reibungslosere Seitenübergänge zu bieten und ein Gefühl von Schnelligkeit zu vermitteln, das die Benutzererfahrung verbessert. Sie haben die Webprotokoll-API wahrscheinlich bereits auf einer Reihe von Websites und Webanwendungen wie Trello, Quartz und Privacy in Aktion gesehen.

Die eher abstrakte (und ziemlich nette) Quartz-Website

Bevor wir weitergehen, schauen wir uns zuerst eine bestimmte API an, die wir auf der Website bereitstellen werden.

Die History-Web-API in Kürze

Um auf die Webprotokoll-API zuzugreifen, schreiben wir zuerst Fenster.Geschichte Folgen Sie diesem dann mit einer der APIs. eine Methode oder eine Eigenschaft. In diesem Tutorial konzentrieren wir uns auf die pushState () Methode, also:

window.history.pushState (Zustand, Titel, URL);

Wie Sie aus dem obigen Ausschnitt sehen können, wird der pushState () Die Methode benötigt drei Parameter. 

1. Der erste Parameter, Zustand, sollte ein Objekt sein, das beliebige Daten enthält. Diese Daten sind dann über zugänglich window.history.state. In einer realen Anwendung würden wir Daten wie eine Seiten-ID, eine URL oder von einem Formular abgeleitete serialisierte Eingaben übergeben. 
2. Die letzten beiden Parameter sind Titel und
3. url. Diese beiden ändern die URL und den Dokumenttitel im Browser und zeichnen sie als neuen Eintrag im Browserverlauf auf. 

Lassen Sie uns das folgende Beispiel analysieren, um besser zu verstehen, wie die pushState () Methode funktioniert.

(Funktion ($) $ ("a") .on ("Klick", Funktion (Ereignis) event.preventDefault (); window.history.pushState (ID: 9, "About - Acme", "about") / "););) (jQuery);

Im obigen Code ist ein Link mit der klicken Ereignis setzt dann die pushState () Methode. Wenn wir auf den Link klicken, erwarten wir, dass der Code den Dokumenttitel und die URL ändert:

Von oben nach unten: Chrome, Firefox, Opera.

Und es tut; Der Screenshot zeigt, dass die URL in "about /" geändert wurde pushState () Methode. Und seit dem pushState () Diese Methode erstellt einen neuen Datensatz im Browserverlauf. Wir können über die Browser-Seite zur vorherigen Seite zurückkehren Zurück Taste.

Derzeit ignorieren jedoch alle Browser in diesem Beispiel die Titel Parameter. Sie können auf dem Screenshot sehen, dass sich das Dokument nicht ändert Über - Acme wie angegeben. Außerdem ruft das an pushState () Methode löst nicht auch das aus Popstate Veranstaltung; ein Ereignis, das jedes Mal ausgelöst wird, wenn sich die Geschichte ändert - etwas, das wir brauchen Es gibt einige Unstimmigkeiten, wie Browser dieses Ereignis behandeln, wie in MDN angegeben:

„Browser neigen dazu, die Popstate Ereignis beim Laden der Seite anders. Chrome (vor v34) und Safari geben immer eine aus Popstate Ereignis beim Laden der Seite, Firefox jedoch nicht. “

Wir benötigen eine Bibliothek als Rückfall, damit die History-Web-APIs ohne Hindernisse konsistent im Browser funktionieren.

Lernen Sie History.js kennen

Seit der pushState () Die Methode funktioniert nicht in vollem Umfang. In diesem Tutorial werden wir History.js nutzen. Wie der Name schon sagt, ist diese JavaScript-Bibliothek eine Polyfill, Replizieren der ursprünglichen History-APIs, die in verschiedenen Browsern funktionieren. Es stellt auch eine Reihe von Methoden bereit, die den nativen APIs ähneln, allerdings mit wenigen Unterschieden.

Wie bereits erwähnt, wird die Browser-native API über die aufgerufen Geschichte Fensterobjekt mit dem Kleinbuchstaben "h", während auf die History.js-API über zugegriffen wird Geschichte mit dem Großbuchstaben „H“. In Anbetracht des vorherigen Beispiels und unter der Annahme, dass die Datei history.js geladen ist, können Sie den Code wie folgt überarbeiten (beachten Sie auch das Großbuchstabe „H“)..

window.History.pushState (, Titel, URL); 

Ich hoffe, diese kurze Erklärung ist leicht zu verstehen. Ansonsten finden Sie hier einige weitere Hinweise, wenn Sie mehr über die Webprotokoll-API erfahren möchten.

• History-API
• Bearbeiten des Browserverlaufs
• Eine Einführung in die HTML5-Geschichte

Aufbau unserer statischen Website

In diesem Abschnitt werden die einzelnen Schritte zum Erstellen einer statischen Website nicht detailliert beschrieben. Unsere Website ist ganz einfach, wie im folgenden Screenshot gezeigt:

Die Website Homepage

Sie müssen keine Website erstellen, die genau gleich aussieht. Sie können beliebig Inhalte hinzufügen und beliebig viele Seiten erstellen. Es gibt jedoch einige Besonderheiten, die Sie hinsichtlich der HTML-Struktur und der Verwendung von beachten müssen Ich würde und Klasse Attribute für einige Elemente.

1. Laden Sie jQuery und History.js innerhalb des Dokuments Kopf. Sie können es als Projektabhängigkeit über Bower oder über ein CDN wie CDNJS oder JSDelivr laden.
2. Packen Sie den Header, den Inhalt und die Fußzeile in ein div mit der ID wickeln; 
3. In der Kopfzeile der Website und in der Fußzeile befinden sich einige Navigationselemente. Jedes Menü sollte auf eine Seite zeigen. Stellen Sie sicher, dass die Seiten vorhanden sind und Inhalte haben.
4. Jeder Menü-Link ist angegeben Seiten-Link Klasse, die wir zur Auswahl dieser Menüs verwenden werden.
5. Zum Schluss geben wir jedem Link eine Titel Attribut, dem wir übergeben werden pushState () um den Dokumenttitel zu bestimmen.

In Anbetracht dessen wird unser HTML-Markup ungefähr wie folgt aussehen:

Wenn Sie mit der Erstellung Ihrer statischen Website fertig sind, können wir den Hauptteil dieses Tutorials weiterführen.

Anwenden der History-Web-API

Bevor wir mit dem Schreiben von Code beginnen, müssen wir eine neue Datei erstellen, um unser JavaScript zu speichern. wir nennen es script.js und laden Sie die Datei in das Dokument vor dem Karosserie schließendes Tag. 

Fügen Sie unseren ersten Code hinzu, um den Dokumenttitel und die URL zu ändern, wenn Sie auf die Menünavigation klicken:

// 1. var $ wrap = $ ("#wrap"); // 2. $ wrap.on ("click", ".page-link") Funktion (Ereignis) // 3. event.preventDefault (); // 4. if (window.location === this.href ) return; // 5. var pageTitle = (this.title)? this.title: this.textContent; pageTitle = (this.getAttribute ("rel") === "home")? pageTitle: pageTitle + " - Acme "; // 6. History.pushState (null, pageTitle, this.href););

Ich habe den Code in mehrere nummerierte Abschnitte aufgeteilt. Dies erleichtert Ihnen das Auffinden des Codes anhand der folgenden Referenz:

1. In der ersten Zeile wählen wir das Element aus, 
   , das umfasst den gesamten Inhalt unserer Website.
2. Wir hängen das Click-Event an. Aber wie Sie oben sehen können, befestigen wir es an der #wickeln Element, anstatt das Ereignis direkt in jeder Menünavigation anzuhängen. Diese Praxis ist bekannt als Veranstaltungsdelegation. Mit anderen Worten, unser #wickeln Element ist für das Abhören von Klickereignissen im Auftrag von verantwortlich .Seiten-Link.
3. Wir haben auch hinzugefügt event.preventDefault () damit die Benutzer nicht auf die betreffende Seite geleitet werden.
4. Wenn die angeklickte Menü-URL mit dem aktuellen Fenster identisch ist, müssen Sie nicht mit der nächsten Operation fortfahren, nur weil dies nicht erforderlich ist.
5. Das Seitentitel Variable enthält das Titelformat, das vom Linktitelattribut oder vom Linktext abgeleitet wird. Jeder Seitentitel folgt Seitentitel - Acme Konvention, außer für die Homepage. „Acme“ ist unser fiktiver Firmenname.
6. Zuletzt passieren wir die Seitentitel und die Seiten-URL zu History.js pushState () Methode.

Wenn Sie nun auf die Menünavigation klicken, sollten sich Titel und URL entsprechend ändern, wie unten gezeigt:

Der Seitentitel und die URL werden geändert

Der Seiteninhalt bleibt jedoch gleich! Es wird nicht aktualisiert, um dem neuen Titel und der neuen URL zu entsprechen. 

Inhalt

Wir müssen die folgenden Codezeilen hinzufügen, um den tatsächlichen Seiteninhalt zu ersetzen.

// 1. History.Adapter.bind (window, "statechange", function () // 2. var state = History.getState (); // 3. $ .get (state.url, function (res)  // 4. $ .each ($ (res), Funktion (Index, Element) if ($ wrap.selector! == "#" + elem.id) return; $ wrap.html ($ (elem) .html ());););); 

Auch hier ist der Code in mehrere nummerierte Abschnitte aufgeteilt.

1. Die erste Zeile des Codes überwacht die durch History.js durchgeführte History-Änderung pushState () Methode und führt die angefügte Funktion aus.
2. Wir rufen die Statusänderungen ab und enthalten verschiedene Daten wie URL, Titel und ID.
3. Durch die jQuery .erhalten() Methode rufen wir den Inhalt von der angegebenen URL ab.
4. Zum Schluss sortieren wir das Element mit einem Ich würde genannt wickeln aus dem abgerufenen Inhalt, und ersetzen Sie schließlich den aktuellen Seiteninhalt damit.

Nach dem Hinzufügen sollte der Inhalt jetzt aktualisiert werden, wenn Sie auf die Menünavigation klicken. Wie bereits erwähnt, können wir auch über den Browser auf die besuchten Seiten zugreifen Zurück und Nach vorne Tasten.

Unsere Website ist an dieser Stelle präsentierbar. Wir möchten jedoch noch einen Schritt weiter gehen, indem wir eine kleine Animation hinzufügen, um die Seite zum Leben zu erwecken. Schließlich fühlt sich unsere Website überzeugender an.

Animation und Übergänge hinzufügen

Animationen in dieser Situation müssen nur einfach sein, daher schreiben wir alles von Grund auf, anstatt Animationen durch eine Bibliothek wie Animate.css, Motion UI von ZURB oder Effeckt.css zu laden. Wir nennen die Animation slideInUp, wie folgt:

@keyframes slideInUp from transform: translate3d (0, 10px, 0); Deckkraft: 0;  zu transform: translate3d (0, 0, 0); Deckkraft: 1; 

Wie der Name schon sagt, wird der Inhalt der Seite zusammen mit der Deckkraft des Elements von unten nach oben verschoben. Wenden Sie die Animation wie folgt auf das Element an, das den Seiteninhalt der Seite umschließt.

.Abschnitt Animationsdauer: .38s; Animations-Füllmodus: beide; Animationsname: slideInUp;  

Der Übergang von einer Seite zu einer anderen sollte sich jetzt nach der Anwendung der Animation weicher anfühlen. Hier können Sie einen Tag anhalten und anrufen! Unsere Website ist fertig und wir sind bereit, sie für die ganze Welt bereitzustellen.

Es gibt jedoch noch eine weitere Sache, die Sie möglicherweise in Betracht ziehen sollten, insbesondere für diejenigen, die die Anzahl der Besuche und das Verhalten der Besucher auf Ihrer Website überwachen möchten.

Wir müssen Google Analytics hinzufügen, um sie zu verfolgen Seitenansicht.

Google Analytics

Da unsere Seiten asynchron geladen werden (mit Ausnahme der Initiale Seite geladen) Das Verfolgen der Seitenzugriffsnummer sollte auch asynchron erfolgen.

Stellen Sie zunächst sicher, dass im Dokument der Standard Google Analytics hinzugefügt ist Kopf. Der Code sieht normalerweise wie folgt aus:

Dann müssen wir unseren JavaScript-Code so anpassen, dass er den Tracking-Code von Google Analytics enthält, damit jede asynchron geladene Seite auch als a gemessen wird Seitenansicht.

Wir haben mehrere Möglichkeiten. Erstens können wir mit dem Zählen beginnen, wenn der Benutzer auf einen Navigationslink klickt, den Seitentitel und die URL ändert oder wenn der Inhalt der Seite vollständig geladen wurde.

Wir entscheiden uns für Letzteres, das wohl das authentischste ist, und nutzen dabei die jQuery versprechen() Methode, nachdem wir den Seiteninhalt wie folgt geändert haben:

$ wrap.html ($ (elem) .html ()) .promise () .done (function (res) // Stellen Sie sicher, dass der neue Inhalt hinzugefügt wird und die Methode 'ga ()' verfügbar ist. if (typeof ga === "Funktion" && res.length! == 0) ga ('set', page: window.location.pathname, titel: state.title); ga ('send', 'pageview') ;);

Das ist alles, wir haben jetzt die Seitenansicht in Google Analytics erfasst.

Einpacken

In diesem Lernprogramm haben wir eine einfache statische Website mit der Webprotokoll-API verbessert, um den Seitenwechsel reibungsloser zu gestalten, das Laden zu beschleunigen und unseren Benutzern insgesamt ein besseres Erlebnis zu bieten. Am Ende dieses Tutorials haben wir auch Google Analytics implementiert, um den Benutzer aufzuzeichnen Seitenansicht asynchron. Darüber hinaus ist unsere Website perfekt krabbelbar von Suchmaschinen-Bots, da es sich, wie erwähnt, nur um eine einfache HTML-Website handelt.

Dies war ein fleischiges Tutorial, das viele Dinge wie CSS-Animation, jQuery Ajax und jQuery Promise erklärt. Hier finden Sie einige Referenzen, die Sie überprüfen sollten, um das Gelernte zu verstärken.

• Einführung in die CSS-Animation für Anfänger
• Schneller Tipp: JavaScript-Ereignisdelegation in 4 Minuten
• AJAX für Frontend-Designer
• Streiten Async Aufgaben mit jQuery-Versprechen
• Entmystifizierung von Google Analytics

Vergessen Sie nicht, die Demo-Site dieses Tutorials sowie den Quellcode im Repository zu besuchen.