Modifica Bara de Adrese URL-ul în Aplicație AJAX pentru a se Potrivi Starea Actuală

Modul de a face acest lucru este de a manipula locație.hash când AJAX actualizări duce la o schimbare de stare, care te'd dori să aibă un discret URL-ul. De exemplu, dacă pagina dvs.'s url-ul este:

http://example.com/

Dacă un client side funcția executat acest cod:

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

location.hash = 'foo';

Apoi, URL-ul afișat în browser-ul va fi actualizat la:

http://example.com/#foo

Acest lucru permite utilizatorilor pentru a marca "foo" de stat a paginii, și de a folosi istoria browser-ul pentru a naviga între state.

Cu acest mecanism în loc,'ll apoi nevoie pentru a analiza hash parte a URL-ului pe partea de client folosind JavaScript pentru a crea și afișa corespunzător stării inițiale, ca identificatori fragment (partea după #) nu sunt trimise la server.

Ben Alman's hashchange plugin, aceasta din urmă o briza daca're folosind jQuery.

Uită-te la site-uri ca book.cakephp.org. Acest site se schimbă URL-ul fără a utiliza hash și de a folosi AJAX. Am'm nu sunt sigur cum se face exact, dar am'am încercat să-mi dau seama. Daca stie cineva, lasă-mă să știu.

De asemenea, github.com atunci când se uită la o navigarea într-un anumit proiect.

Este puțin probabil ca scriitorul vrea să reîncărcați sau redirecționa vizitatorul său atunci când se utilizează Ajax. Dar de ce nu folosesti HTML5's pushState/replaceState?

Te'll fi capabil de a modifica addressbar fel de mult cum doriți. Ia natural url-uri, cu AJAX.

Verifica codul de pe ultimul meu proiect: http://iesus.se/

Acest lucru este similar cu ceea ce a spus Kevin. Puteți avea dvs. de client stat ca un obiect javascript, și atunci când doriți pentru a salva statul, serialize obiect (folosind JSON și codare base64). Puteți seta apoi fragment a href acestui șir.

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

Prima cale va trata noul stat ca o nouă locație (atât de la butonul din spate le va duce la locația anterioară). Acesta din urmă nu.

Dacă OP sau altele sunt încă în căutarea pentru o modalitate de a modifica istoria browser-ului, pentru a permite stat, folosind pushState și replaceState, cum a sugerat de către IISUS, este 'bine' mod de a face asta acum. L's principalul avantaj pe locație.hash pare a fi faptul că se creează url-uri reale, nu doar hash-uri. Dacă istoria browser-ului, folosind hash este salvat, și apoi reluat cu javascript dezactivat, aplicația a câștigat't de lucru, de la hash-uri sunt't trimise la server. Cu toate acestea, dacă pushState a fost folosit, întregul traseu va fi trimis la server, care apoi puteți construi pentru a răspunde în mod corespunzător la rute. Am văzut, de exemplu, în cazul în care aceeași mustață template-uri au fost folosite pe ambele server și client side. Dacă clientul a avut de activarea javascript-ului, el ar lua repede răspunsurile prin evitarea dus-intors de la server, dar aplicația va funcționa perfect, fără javascript. Astfel, aplicația poate degrada cu grație în absența javascript.

De asemenea, cred că există un cadru de acolo, cu un nume ca history.js. Pentru browserele care suporta HTML5, se folosește pushState, dar dacă browser-ul nu - 't de sprijin care, în mod automat cade înapoi la folosind hash-uri.

SWFAddress lucreaza in Flash & Javascript proiecte și vă permite să creați fi marcată Url-uri (folosind hash-metoda menționată mai sus), precum și oferindu-vă înapoi-butonul de sprijin.

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

Fereastra.locație.hash metoda este modul preferat de a face lucrurile. Pentru o explicație a modului de a face, Ajax Modele - de Url-uri Unice.

YUI are o implementare de acest model ca un modul, care include IE de lucru specifice ului pentru a obține înapoi buton de lucru, împreună cu re-scris adresa folosind hash. YUI Istoria Browser Manager.

Alte cadre au implementări similare, precum și. Punctul important este dacă doriți istoria să lucreze împreună cu re-scris adresa, browsere diferite au nevoie de diferite moduri de manipulare. (Acest lucru este detaliat în primul link articol.)

IE are nevoie de un iframe pe baza hack, în cazul în care Firefox va produce dublu istorie, folosind aceeași metodă.

Verificați dacă utilizatorul este 'in' pe pagina, atunci când faceți clic pe bara de url-ul, javascript spune că sunt din pagina. Dacă modificați bara de url-ul și apăsați 'INTRA' cu simbolul '#' în ea, atunci te duci în pagina din nou, fără a faceți clic pe pagină manual cu cursorul mouse-ului, apoi o keyboad eveniment de comandă (document.onkeypress) din javascript va fi capabil de a verifica dacă acesta's introduceți și active javascript pentru redirecționare. Puteți verifica dacă utilizatorul este ÎN pagina cu fereastra.onfocus și verificați dacă el's cu fereastra.onblur.

Da, l's posibil.

;)