Frage

Ich Schreibe eine AJAX-app, sondern, wie der Benutzer bewegt sich durch die app, ich möchte die URL in die Adressleiste ein, um die update-trotz der fehlenden Seite wird neu geladen.Im Grunde möchte ich für Sie können Lesezeichen an jeder beliebigen Stelle und dadurch Rückkehr zum aktuellen Stand.

Wie sind Personen, die mit Pflege und Erholung in AJAX-Anwendungen?

War es hilfreich?

Lösung

Der Weg, dies zu tun ist, um zu manipulieren location.hash wenn AJAX-updates führen in einen Zustand zu ändern, dass Sie würde wie zu haben eine dezente URL.Für Beispiel, wenn Ihre Seite, die url ist:

http://example.com/

Wenn Sie einen client-Funktion ausgeführt, dieser code:

// AJAX code to display the "foo" state goes here.

location.hash = 'foo';

Dann die angezeigte URL im browser aktualisiert werden, um:

http://example.com/#foo

Dies ermöglicht es Benutzern, Lesezeichen für die "foo" - Zustand der Seite und die Nutzung der browser-Historie navigieren zwischen den Staaten.

Mit diesem Mechanismus in Ort, Sie müssen dann analysiert den hash-Teil der URL, auf der client-Seite mit JavaScript zu erstellen und die Anzeige der entsprechenden ursprünglichen Zustand, als fragmentbezeichner (der Teil nach dem #) werden nicht an den server gesendet.

Ben Alman s hashchange-plugin macht die letztere ein Kinderspiel, wenn Sie die Verwendung von jQuery.

Andere Tipps

Blick auf Seiten wie book.cakephp.org.Diese Webseite ändert sich die URL, ohne die hash-und AJAX verwenden.Ich bin mir nicht sicher, wie er es tut genau, aber ich habe versucht, es herauszufinden.Wenn jemand weiß, lass es mich wissen.

Auch github.com bei der Betrachtung Navigation innerhalb eines bestimmten Projekts.

Es ist unwahrscheinlich, dass der Schriftsteller will, um neu zu laden oder umleiten seine Besucher bei der Verwendung von Ajax.Aber warum nicht verwenden Sie HTML5-s pushState/replaceState?

Sie werden in der Lage zu ändern die addressbar so viel, wie Sie möchten. Holen Sie sich natürlicher aussehende urls, die mit AJAX.

Schauen Sie sich den code auf meinem neuesten Projekt:http://iesus.se/

Dies ist ähnlich zu dem, was Kevin sagte.Sie können Ihre client-Status, da einige javascript-Objekt, und wenn Sie möchten, speichern Sie den Zustand, den Sie serialisieren des Objekts (mit JSON-und base64-Codierung).Sie können dann set das fragment des "href", string.

var encodedState = base64(json(state));
var newLocation = oldLocationWithoutFragment + "#" + encodedState;

document.location = newLocation; // adds new entry in browser history
document.location.replace(newLocation); // replaces current entry in browser history

Die erste Weise zu behandeln, wird der neue Status als neuer Speicherort ein (also die zurück-Taste bringt Sie zum vorherigen Position).Der letztere nicht.

SWFAddress works in Flash & Javascript-Projekten und ermöglicht Ihnen das erstellen bookmarkable URLs (mit der hash-Methode oben erwähnt), sowie geben Sie die zurück-Taste Unterstützung.

http://www.asual.com/swfaddress/

Das Fenster.Lage.hash-Methode ist die bevorzugte Art, Dinge zu tun.Für eine Erklärung, wie es zu tun, Ajax Patterns - Unique URLs.

YUI hat eine Implementierung dieses Musters als ein Modul umfasst IE bestimmte Problemumgehungen Arbeit für immer die zurück-Taste funktioniert zusammen mit re-schreiben die Adresse, die mit dem hash. YUI Browser-History-Manager.

Andere frameworks haben ähnliche Implementierungen.Der wichtige Punkt ist, wenn Sie wollen die Geschichte zu arbeiten zusammen mit den re-schreiben die Adresse, die verschiedenen Browser unterschiedliche Möglichkeiten der Behandlung es.(Dies ist ausführlich in der ersten link-Artikel.)

IE muss ein iframe-hack, wo Firefox produzieren die doppelte Geschichte mit der gleichen Methode.

Wenn OP-oder andere sind noch auf der Suche nach einem Weg zu tun, ändern Sie browser-history zu aktivieren Zustand, mit pushState und replaceState, wie vorgeschlagen, durch IESUS, ist der 'richtige' Weg, es jetzt zu tun.Es Hauptvorteil über den Standort.hash scheint zu sein, dass es schafft, die tatsächlichen urls, nicht nur hashes.Wenn die browser-Historie mithilfe von hashes gespeichert und dann revisited mit javascript deaktiviert, wird die app nicht funktionieren, da die hashes nicht an den server gesendet.Allerdings, wenn pushState verwendet wurde, ist die gesamte route wird an den server gesendet werden, um Sie dann zu bauen, um angemessen zu reagieren, um die Routen.Ich sah ein Beispiel, wo der gleiche Schnurrbart Vorlagen wurden verwendet auf sowohl die server und die client-Seite.Wenn der client javascript aktiviert, würde er bissig Antworten, die durch die Vermeidung der roundtrip zum server, aber die app perfekt funktionieren würde gut ohne javascript.So kann die app gracefully degrade in der Abwesenheit von javascript.

Außerdem glaube ich, dass es einen Rahmen gibt, mit einem Namen wie history.js.Für Browser, die HTML5 unterstützen, es pushState verwendet, aber wenn der browser nicht unterstützen, es fällt automatisch wieder auf die Verwendung von hashes.

Prüfen, ob Benutzer 'in' ist die Seite, die Sie beim klicken auf die url-Leiste, javascript, sagt Sie von der Seite.Wenn Sie beim ändern der url-Leiste und drücken Sie 'ENTER' mit dem symbol '#' in es, dann gehen Sie in die Seite wieder, ohne zu klicken auf die Seite manuell mit dem Mauszeiger, dann ein keyboad Fall-Befehl (Dokument.onkeypress) von javascript werden in der Lage sein zu prüfen, ob es eintreten und aktiv die javascript-Umleitung.Sie können überprüfen, ob Benutzer die Seite mit dem Fenster.onfocus und prüfen, ob er mit Fenster.onblur.

Ja, es ist möglich.

;)

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