Gutes Tutorial zur Verwendung der HTML5-Verlaufs-API (Pushstate?) [Geschlossen]

168

Ich möchte die HTML5-Verlaufs-API verwenden, um Deep-Link-Probleme mit AJAX-geladenen Inhalten zu lösen, aber ich habe Probleme, mich auf den Weg zu machen. Kennt jemand gute Ressourcen?

Ich möchte dies verwenden, da es eine großartige Möglichkeit ist, die Möglichkeit zu berücksichtigen, dass die gesendeten Links JS möglicherweise nicht aktiviert haben. Viele Lösungen schlagen fehl, wenn jemand mit JS einen Link an jemanden ohne JS sendet.

Meine ersten Untersuchungen scheinen auf eine Verlaufs-API in JS und die pushState-Methode hinzuweisen.

http://html5demos.com/history

Milder Flaum
quelle

Antworten:

181

Für ein großartiges Tutorial benötigen Sie lediglich die Seite Mozilla Developer Network zu dieser Funktionalität: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Leider ist die HTML5-Verlaufs-API in allen HTML5-Browsern unterschiedlich implementiert (was sie inkonsistent und fehlerhaft macht) und hat keinen Fallback für HTML4-Browser. Glücklicherweise bietet History.js Kreuzkompatibilität für die HTML5-Browser (um sicherzustellen, dass alle HTML5-Browser wie erwartet funktionieren) und bietet optional einen Hash-Fallback für HTML4-Browser (einschließlich der beibehaltenen Unterstützung für Daten, Titel, PushState- und ReplaceState-Funktionen).

Weitere Informationen zu History.js finden Sie hier: https://github.com/browserstate/history.js

Einen Artikel über die Hashbangs VS Hashes VS HTML5-Verlaufs-API finden Sie hier: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling

Balupton
quelle
25
Schamloser Selbststecker. Ausgezeichnete Post und Plugin. :)
Purag
28

Denken Sie bei der Verwendung von HTML5-Pushstate daran, dass ein Benutzer einen Deep Link kopiert oder mit einem Lesezeichen versehen und ihn erneut besucht. Dies ist ein direkter Server-Treffer, der 404 bedeutet, sodass Sie darauf vorbereitet sein müssen und selbst eine Pushstate-JS-Bibliothek nicht hilft Sie. Die einfachste Lösung besteht darin, Ihrem Nginx- oder Apache-Server eine Umschreiberegel hinzuzufügen:

Apache (in Ihrem vhost, wenn Sie einen verwenden):

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

Nginx

rewrite ^(.+)$ /index.html last;
Mauvis Ledford
quelle
DAS ist die wahre Antwort. Dies ist nirgends im History.js-Wiki / in den Tutorials von Balupton usw. Tatsächlich verwendet History.js keinen Hash, sodass Sie eine .htaccess-Umleitung verwenden müssen!
Adriendenat
13
Im Idealfall sollte Ihr Server / Ihre App angemessen auf die Route reagieren, ohne dass diese Umschreibung erforderlich ist.
Sholsinger
Einverstanden, außer bei vielen modernen JavaScript-Frameworks wie Backbone.js, Spine, Ember usw. Dies sind im Wesentlichen "einseitige" JavaScript-Anwendungen. Man könnte eine Lösung für die Bereitstellung der Write-Backend-Vorlage für SEO usw. ausarbeiten, aber in der Zwischenzeit wäre dies notwendig.
Mauvis Ledford
*richtig. Ich schreibe hier ausführlicher darüber: readystate4.com/2012/05/17/…
Mauvis Ledford
6

Die HTML5-Verlaufsspezifikation ist eigenartig.

history.pushState()löst kein popstateEreignis aus und lädt keine neue Seite selbst. Es sollte nur den Staat in die Geschichte treiben. Dies ist eine "Rückgängig" -Funktion für Anwendungen mit nur einer Seite. Sie müssen ein popstateEreignis manuell auslösen oder verwenden history.go(), um zum neuen Status zu navigieren. Die Idee ist, dass ein Router popstateEreignisse abhören und die Navigation für Sie durchführen kann.

Einige Dinge zu beachten:

  • history.pushState()und history.replaceState()keine popstateEreignisse versenden .
  • history.back(), history.forward()Und die Vor- und Zurück - Tasten des Browsers tun Dispatch popstateVeranstaltungen.
  • history.go()und history.go(0)führen Sie eine vollständige Seite neu geladen und Sie versenden keine popstateEreignisse.
  • history.go(-1)(1 Seite zurück) und history.go(1)(1 Seite vorwärts) führen Versandereignisse aus popstate.

Sie können die Verlaufs-API wie folgt verwenden, um einen neuen Status zu verschieben UND ein Popstate-Ereignis auszulösen.

history.pushState({message:'New State!'}, 'New Title', '/link'); window.dispatchEvent(new PopStateEvent('popstate', { bubbles: false, cancelable: false, state: history.state }));

Warten Sie dann popstatemit einem Router auf Ereignisse.

Erik Ringsmuth
quelle
1
Ist es nur ich oder new PopStateEvent(...)scheint es in IE11 nicht zu funktionieren? Gibt es eine Problemumgehung, die jemand kennt?
David Alan Hjelle
Es sieht so aus, als ob IE 11 so etwas braucht wie: var pop_state_event = document.createEvent('Event'); pop_state_event.initEvent('popstate', true, true); window.dispatchEvent(pop_state_event);
David Alan Hjelle
4

Sie können Davis.js ausprobieren , es gibt Ihnen Routing in Ihrem JavaScript mit pushState, wenn verfügbar, und ohne JavaScript ermöglicht es Ihrem serverseitigen Code, die Anforderungen zu verarbeiten.

Oliver Nachtigall
quelle
4

Hier ist ein großartiger Screencast zum Thema von Ryan Bates von Railscasts. Am Ende deaktiviert er einfach die Ajax-Funktionalität, wenn die history.pushState-Methode nicht verfügbar ist:

http://railscasts.com/episodes/246-ajax-history-state

deb
quelle
2

Vielleicht möchten Sie sich dieses jQuery-Plugin ansehen. Sie haben viele Beispiele auf ihrer Website. http://www.asual.com/jquery/address/

Nathan Totten
quelle
Auch diese Lösung scheint fehlzuschlagen, wenn JS ausgeschaltet ist. Ich denke, die Verlaufs-API kann in Verbindung mit Modrewrite arbeiten, sodass Links immer in erster Linie vom Server verarbeitet werden, ohne dass eine Umleitung von der JS-Ebene erforderlich ist.
Mild Fuzz
Mit dem Modrewrite sind Sie auf dem richtigen Weg. Die Lösung zum Verwalten der Verlaufs-API und zum Behandeln, wenn der Benutzer kein JS hat, sind zwei getrennte Dinge. Wenn Sie kein JS haben, müssen Sie den Benutzer mit Standard-Hrefs und Serverantworten behandeln. Die Verlaufs-API kann als eine Art "nice to have" erstellt werden, wenn der Browser des Benutzers dies unterstützt.
Nathan Totten
Sowohl die Express- als auch die State-Beispiele, die mit jQuery Address 1.3 geliefert werden, funktionieren recht gut, wenn JavaScript deaktiviert ist. Der zweite verwendet PHP mit mod_rewrite.
Rostislav
Genau mein Takt. Ich beabsichtige, die Site ohne JS zu erstellen, AJAX-Elemente hinzuzufügen und dann den Verlauf zu verwenden, um die URL neu zu schreiben, wobei die tiefe Verknüpfung erhalten bleibt. Theoretisch sollte es eine bessere Methode sein als jede andere, die ich gesehen habe, da die Site zu keinem Zeitpunkt von AJAX abhängt
Mild Fuzz
1
-1 als jQuery-Adresse ist kein direkter Port der HTML5-Status-API - unterstützt keine Daten oder Titel und ersetztState.
Balupton
2

Ich habe über History.js eine sehr einfache Router-Abstraktion namens StateRouter.js geschrieben . Es befindet sich in einem sehr frühen Entwicklungsstadium, aber ich verwende es als Routing-Lösung in einer einseitigen Anwendung, die ich schreibe. Wie Sie fand ich History.js sehr schwer zu verstehen, zumal ich noch ziemlich neu in JavaScript bin, bis ich begriff, dass Sie wirklich eine Routing-Abstraktion darüber benötigen (oder haben sollten), da sie eine niedrige Ebene löst Problem.

Dieser einfache Beispielcode sollte zeigen, wie er verwendet wird:

var router = new staterouter.Router();
// Configure routes
router
  .route('/', getHome)
  .route('/persons', getPersons)
  .route('/persons/:id', getPerson);
// Perform routing of the current state
router.perform();

Hier ist eine kleine Geige, die ich erfunden habe, um ihre Verwendung zu demonstrieren.

aknuds1
quelle
1
Diese Geige funktioniert bei mir in Chrome auf dem Mac nicht. Es wird ein Fehler ausgegeben. (Ungefangener Referenzfehler: Staterouter ist nicht definiert)
DrewT
@DrewT Danke, die Geige war aufgrund einer Änderung bei github.com gebrochen, aber ich habe es umgangen.
aknuds1
Ja, jetzt arbeiten, danke für die schnelle Antwort.
DrewT
1

Wenn jQuery verfügbar ist, können Sie jQuery BBQ verwenden

Sprugman
quelle
Dies scheint bei ausgeschaltetem JS zu scheitern.
Mild Fuzz
das ist wahrscheinlich wahr - habe es nicht untersucht. Ich würde denken, dass Sie dieses Problem bei allen js-library-basierten Ansätzen haben werden. Sie basieren auf der Manipulation des Hash-Teils der URL.
Sprugman
1
Das ist der Punkt der HTML5-
Verlaufs-
2
@MildFuzz Computer scheint ohne Stromquelle zu versagen! Ich denke, Sie haben einen ID-10-T-Fehler ...
Eric Hodonsky
1
Ironischerweise bist du es, der missverstanden wurde
Mild Fuzz