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.
quelle
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
quelle
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):
Nginx
quelle
Die HTML5-Verlaufsspezifikation ist eigenartig.
history.pushState()
löst keinpopstate
Ereignis 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 einpopstate
Ereignis manuell auslösen oder verwendenhistory.go()
, um zum neuen Status zu navigieren. Die Idee ist, dass ein Routerpopstate
Ereignisse abhören und die Navigation für Sie durchführen kann.Einige Dinge zu beachten:
history.pushState()
undhistory.replaceState()
keinepopstate
Ereignisse versenden .history.back()
,history.forward()
Und die Vor- und Zurück - Tasten des Browsers tun Dispatchpopstate
Veranstaltungen.history.go()
undhistory.go(0)
führen Sie eine vollständige Seite neu geladen und Sie versenden keinepopstate
Ereignisse.history.go(-1)
(1 Seite zurück) undhistory.go(1)
(1 Seite vorwärts) führen Versandereignisse auspopstate
.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
popstate
mit einem Router auf Ereignisse.quelle
new PopStateEvent(...)
scheint es in IE11 nicht zu funktionieren? Gibt es eine Problemumgehung, die jemand kennt?var pop_state_event = document.createEvent('Event'); pop_state_event.initEvent('popstate', true, true); window.dispatchEvent(pop_state_event);
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.
quelle
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
quelle
Vielleicht möchten Sie sich dieses jQuery-Plugin ansehen. Sie haben viele Beispiele auf ihrer Website. http://www.asual.com/jquery/address/
quelle
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:
Hier ist eine kleine Geige, die ich erfunden habe, um ihre Verwendung zu demonstrieren.
quelle
Wenn jQuery verfügbar ist, können Sie jQuery BBQ verwenden
quelle