Gutes Tutorial für die Verwendung von HTML5 History API (pushstate?) [Geschlossen]

StackOverflow https://stackoverflow.com/questions/4015613

Frage

Ich suche die HTML5 History API in Verwendung zu lösen tiefe Verknüpfung Probleme mit AJAX Inhalt geladen, aber ich habe Schwierigkeiten, den Boden zu bekommen. Hat Jeder weiß von jedem guten Ressourcen?

Ich möchte diese verwenden, da es eine gute Möglichkeit, scheint die Möglichkeit, jene Wesen zu ermöglichen, dass die Verbindungen gesendet möglicherweise nicht über JS eingeschaltet. Viele Lösungen fehlschlagen, wenn jemand mit JS einen Link zu dem jemand ohne.

Meine anfängliche Forschung scheint zu deuten auf eine Geschichte API innerhalb JS, und die Methode pushstate.

http://html5demos.com/history

War es hilfreich?

Lösung

Für ein großes Tutorial der Mozilla Developer Network-Seite auf dieser Funktionalität ist alles, was Sie benötigen: https : //developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Leider ist die HTML5 History API anders in allen HTML5-Browsern implementiert (es inkonsequent und Buggy machen) und hat keinen Rückfall für HTML4-Browser. Glücklicherweise history.js bietet Cross-Kompatibilität für die HTML5-Browser (Gewährleistung aller HTML5-Browser arbeiten als erwartet) und bietet optional einen Hash-Fallback für HTML4 Browser (einschließlich beibehalten Unterstützung für Daten, Titel, und replaceState pushstate-Funktionalität).

Sie können mehr über history.js lesen Sie hier: https://github.com/browserstate/history.js

Für einen Artikel über Hashbangs VS Hashes VS HTML5 History API finden Sie hier: https://github.com/browserstate/history.js/wiki/Intelligent -state-Handhabung

Andere Tipps

profitierte ich viel von ‚Tauchen Sie ein in HTML 5‘. Die Erklärung und Demo einfacher und auf den Punkt. Geschichte Kapitel - http://diveintohtml5.info/history.html und Geschichte Demo - http://diveintohtml5.info/examples/history/fer.html

Beachten Sie, während HTML5 pushstate zu verwenden, wenn ein Benutzer Kopien oder Lesezeichen eine tiefe Verbindung und Besucher erneut, dann wird, dass ein direkter Server-Hit sein, die 404, so dass Sie dazu bereit sein müssen, und sogar ein pushstate js Bibliothek gewonnen ‚t helfen Ihnen. Die einfachste Lösung ist eine Rewrite-Regel auf Ihre Nginx oder Apache-Server wie so hinzuzufügen:

Apache (in Ihrem vhost, wenn Sie über einen Link): 

<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 Geschichte spec ist etwas eigenartig.

history.pushState() kein popstate -Ereignis oder eine neue Seite von sich selbst laden. Es war nur gemeint Zustand in der Geschichte zu schieben. Dies ist ein „Undo“ -Funktion für einzelne Seite Anwendungen. Sie müssen manuell ein popstate Ereignis oder Verwendung history.go() zu navigieren auf den neuen Zustand versenden. Die Idee ist, dass ein Router zu popstate Ereignissen und macht die Navigation für Sie hören kann.

Einige Dinge zu beachten:

  • history.pushState() und history.replaceState() nicht Versand popstate Ereignisse.
  • history.back(), history.forward() und den Browser des Zurück- und Vorwärts-Tasten tun Versand popstate Ereignisse.
  • history.go() und history.go(0) tun eine ganze Seite neu laden und sie versenden nicht popstate Ereignisse.
  • history.go(-1) (zurück 1 Seite) und history.go(1) (vorwärts 1 Seite) zu tun Versand popstate Veranstaltungen.

Sie können die Geschichte API wie diese verwenden, um einen neuen Staat und lösen Sie ein popstate Ereignis zu drücken.

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

hört dann für popstate Ereignisse mit einem Router.

Sie könnten versuchen, Davis.js , gibt es Ihnen in Ihrem JavaScript-Routing pushstate verwenden, wenn verfügbar und ohne JavaScript es ermöglicht Ihre Server-Seite Code, um die Anforderungen zu verarbeiten.

ist hier eine große Bildschirm-Besetzung auf dem Thema von Ryan Bates von Railscasts. Am Ende sperrt er einfach die Ajax-Funktionalität, wenn die history.pushState Methode nicht verfügbar ist:

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

Sie können einen Blick auf diese jQuery-Plugin zu nehmen. Sie haben viele Beispiele auf ihrer Website. http://www.asual.com/jquery/address/

Ich habe einen sehr einfachen Router Abstraktion auf der history.js geschrieben, genannt StateRouter.js . Es ist in sehr frühen Phasen der Entwicklung, aber ich es als die Routing-Lösung in einer Single-Seite Anwendung verwende ich schreibe. Wie Sie, fand ich history.js sehr schwer zu fassen, zumal ich auf JavaScript ganz neu bin, bis ich verstanden, dass Sie wirklich brauchen (oder sollte), um eine Routing-Abstraktion oben drauf, da es eine Low-Level löst Problem dar.

Dieses einfache Beispiel-Code sollte zeigen, wie es 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 Ich habe um zusammengebraut seine Verwendung zu demonstrieren.

, wenn jQuery verfügbar ist, könnten Sie jQuery BBQ

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top