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

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

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

Ich habe viel von 'Dive into HTML 5' profitiert. Die Erklärung und Demo sind einfacher und auf den Punkt. Verlaufskapitel - http://diveintohtml5.info/history.html und Verlaufsdemo - http://diveintohtml5.info/examples/history/fer.html

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;

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.

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.

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

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

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.

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