Zmodyfikować pasek adresu URL w aplikacji AJAX w celu dostosowania obecnego stanu

głosy
160

Piszę aplikację AJAX, ale gdy użytkownik porusza się po aplikacji, chciałbym adres URL w pasku adresu, aby zaktualizować pomimo braku przeładowywanie stron. Zasadniczo chciałbym dla nich, aby móc zakładkę w dowolnym momencie, a tym samym powrót do aktualnego stanu.

Jak to ludzie obchodzenia utrzymanie Oferują robione w aplikacji AJAX?

Utwórz 04/08/2008 o 18:53
źródło użytkownik
W innych językach...                            


8 odpowiedzi

głosy
116

Sposobem na to jest manipulować location.hash, gdy aktualizacje AJAX doprowadzić do zmiany stanu, który chcesz mieć dyskretną URL. Na przykład, jeżeli adresu URL strony jest:

http://example.com/

Jeśli funkcja stronie klienta wykonywane ten kod:

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

location.hash = 'foo';

Następnie URL wyświetlany w przeglądarce zostanie zaktualizowana:

http://example.com/#foo

Pozwala to użytkownikom na zakładkę na „foo” stan strony i skorzystać z historii przeglądarki, aby poruszać się pomiędzy państwami.

Z tego mechanizmu w miejscu, będziesz wtedy trzeba analizować na część skrótu adresu URL po stronie klienta przy użyciu JavaScript, aby utworzyć i wyświetlić odpowiedni stan początkowy, jako identyfikatory fragment (część po #) nie są wysyłane do serwer.

Wtyczka hashchange Ben Alman użytkownika sprawia, że ten ostatni wiatr jeśli używasz jQuery.

Odpowiedział 04/08/2008 o 19:04
źródło użytkownik

głosy
18

Spójrz na stronach takich jak book.cakephp.org. Ta witryna zmienia adres URL bez użycia skrótu i ​​użyć AJAX. Nie jestem pewien, jak to robi dokładnie to, ale ja już próbuje to rozgryźć. Jeśli ktoś wie, daj mi znać.

github.com także gdy patrząc na nawigacją w określonym projekcie.

Odpowiedział 13/02/2011 o 20:47
źródło użytkownik

głosy
17

Jest mało prawdopodobne, pisarz chce przeładować lub przekierować jego gościa przy użyciu Ajax. Ale dlaczego nie używać HTML5 w pushState/ replaceState?

Będziesz mógł modyfikować adresowym jak chcesz. Uzyskać naturalny wygląd adresów URL, z AJAX.

Sprawdź kod na moim najnowszym projekcie: http://iesus.se/

Odpowiedział 27/04/2011 o 09:09
źródło użytkownik

głosy
12

Jest to podobne do tego, co powiedział Kevin. Możesz mieć swój stan klienta jako pewnego JavaScript Object, a gdy chcesz zapisać stan, to obiekt (za pomocą JSON i kodowanie base64) serializacji. Następnie można ustawić fragment href do tego łańcucha.

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

Pierwszy sposób potraktuje jako nowy stan nowej lokalizacji (tak tylnym przycisku przeniesie je do poprzedniej lokalizacji). Ten ostatni nie.

Odpowiedział 04/08/2008 o 19:02
źródło użytkownik

głosy
3

Jeśli OP lub inne są wciąż szuka sposobu, aby zrobić modyfikować historię przeglądarki, aby umożliwić stan, używając pushState i replaceState, jak sugeruje Iesus, jest „prawo” sposób to zrobić teraz. Jest to główną zaletą nad location.hash wydaje się, że tworzy rzeczywiste adresy URL, a nie tylko skróty. Jeśli historia przeglądarki przy użyciu skrótów zostanie zapisany, a następnie powrócił z javascript wyłączone, aplikacja nie będzie działać, ponieważ skróty nie są wysyłane do serwera. Jednakże, jeśli pushState została wykorzystana cała trasa zostanie wysłany do serwera, który można następnie zbudować odpowiednio reagować na trasach. Widziałem przykład, w którym te same szablony wąsy były używane zarówno na serwerze jak i po stronie klienta. Jeśli klient miał być włączona obsługa JavaScript, mógłby dostać wawy odpowiedzi przez unikanie podroż dookoła do serwera, ale aplikacja będzie działać perfekcyjnie bez javascript. Tak więc, aplikacja może bezpiecznie rozkładowi w nieobecności JavaScript.

Również uważam, istnieją pewne ramy tam, o nazwie typu history.js. Dla przeglądarek obsługujących HTML5, używa pushState, ale jeśli przeglądarka nie obsługuje, automatycznie spada z powrotem do używania skrótów.

Odpowiedział 23/06/2011 o 10:20
źródło użytkownik

głosy
3

Metoda window.location.hash jest preferowanym sposobem robienia rzeczy. O wyjaśnienie, jak to zrobić, Patterns Ajax - unikatowe adresy URL .

YUI ma implementację tego wzoru jako moduł, który zawiera IE arounds specyficzna praca dla uzyskania przycisku Wstecz roboczą wraz z ponowne wpisywanie adresu przy użyciu skrótu. YUI Przeglądarka Historia menadżera .

Inne ramy mają podobne implementacje również. Ważną rzeczą jest, jeśli chcesz historia pracować wraz z re-pisząc na adres, różnych przeglądarek potrzebują różne sposoby obchodzenia się z nim. (Jest to szczegółowy w pierwszym ogniwem artykułu).

IE potrzebuje siekać oparciu iframe, gdzie Firefox przyniesie podwójną historię przy użyciu tej samej metody.

Odpowiedział 31/03/2009 o 06:54
źródło użytkownik

głosy
3

SWFAddress pracuje w projektach Flash i JavaScript i pozwala tworzyć jako zakładki URL (za pomocą metody mieszania wspomniano powyżej), jak również daje wsparcie back-przycisk.

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

Odpowiedział 01/09/2008 o 14:43
źródło użytkownik

głosy
2

Sprawdź, czy użytkownik jest „w” na stronie po kliknięciu na pasku adresu, JavaScript mówi, że jesteś na stronie. Jeżeli zmienisz pasku adresu i naciśnij klawisz „Enter” z symbolem „#” w nim następnie udać się na stronę ponownie, bez kliknięcia na stronie ręcznie za pomocą kursora myszy, a następnie polecenie wydarzenie keyboad (document.onkeypress) z JavaScript będzie być w stanie sprawdzić, czy to wejść i aktywny javascript do przekierowywania. Można sprawdzić, czy użytkownik znajduje się na stronie z window.onfocus i sprawdzić, czy jest się z window.onblur.

Tak, to możliwe.

;)

Odpowiedział 14/10/2010 o 00:18
źródło użytkownik

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more