W jaki sposób miałbym działanie JavaScript, które może mieć wpływ na bieżącą stronę, ale zmieniłoby również adres URL w przeglądarce, więc jeśli użytkownik kliknie ponownie załadować lub utworzyć zakładkę, to używany jest nowy adres URL?
Byłoby również miło, gdyby przycisk Wstecz przeładował oryginalny adres URL.
Próbuję zapisać stan JavaScript w adresie URL.
javascript
url
html5-history
fragment-identifier
hashchange
Steven Noble
źródło
źródło
pushState
:for(i=1;i<50;i++){var txt="..................................................";txt=txt.slice(0,i)+"HTML5"+txt.slice(i,txt.length);history.pushState({}, "html5", txt);}
Odpowiedzi:
W HTML 5 użyj
history.pushState
funkcji . Jako przykład:i href:
Jeśli chcesz zmienić adres URL bez dodawania wpisu do listy przycisków wstecz, użyj
history.replaceState
zamiast tego.źródło
Jeśli chcesz pracować w przeglądarkach, które nie obsługują
history.pushState
ihistory.popState
jeszcze „stare” sposobem jest ustawiony identyfikator fragmentu, który nie spowoduje przeładowanie strony.Podstawowym pomysłem jest ustawienie
window.location.hash
właściwości na wartość, która zawiera dowolne potrzebne informacje o stanie, a następnie użycie zdarzenia window.onhashchange lub w przypadku starszych przeglądarek, które nie obsługująonhashchange
(IE <8, Firefox <3.6), okresowo sprawdzaj, czy sprawdź, czy skrót się zmienił (używającsetInterval
na przykład) i zaktualizuj stronę. Będziesz także musiał sprawdzić wartość skrótu przy ładowaniu strony, aby skonfigurować początkową zawartość.Jeśli używasz jQuery, istnieje wtyczka hashchange, która będzie używać dowolnej metody obsługiwanej przez przeglądarkę. Jestem pewien, że istnieją również wtyczki do innych bibliotek.
Jedną z rzeczy, na które należy uważać, jest kolizja z identyfikatorami na stronie, ponieważ przeglądarka przewinie do dowolnego elementu o pasującym identyfikatorze.
źródło
setInterval
z inspekcjidocument.location.hash
można skorzystać zehashchange
zdarzenia, ponieważ jest ono o wiele bardziej przyjęte. Sprawdź tutaj, jakie przeglądarki obsługują każdy standard . Moje obecne podejście polega na użyciu push / popState w przeglądarkach, które go obsługują. W pozostałych ustawiam skrót i oglądam tylkohashchange
w obsługiwanych przeglądarkach. To pozostawia IE <= 7 bez obsługi historii, ale z użytecznym łączem bezpośrednim. Ale kogo obchodzi historia IE <= 7?_trackPageview
z „prawdziwym” adresem URL nowej strony.window.location.href zawiera bieżący adres URL. Możesz z niego czytać, możesz do niego dołączyć i możesz go wymienić, co może spowodować ponowne załadowanie strony.
Jeśli, jak się wydaje, chcesz zapisać stan javascript w adresie URL, aby można go było dodać do zakładek, bez ponownego ładowania strony, dołącz go do bieżącego adresu URL po znaku # i uruchom fragment javascript wywołany przez zdarzenie onload parsuj bieżący URL, aby zobaczyć, czy zawiera zapisany stan.
Jeśli używasz? zamiast # wymusisz przeładowanie strony, ale ponieważ przeanalizujesz zapisany stan przy ładowaniu, może to nie być problemem; dzięki temu przyciski do przodu i do tyłu będą również działać poprawnie.
źródło
Zdecydowanie podejrzewałbym, że nie jest to możliwe, ponieważ byłoby to niesamowitym problemem bezpieczeństwa. Na przykład mógłbym stworzyć stronę, która wyglądałaby jak strona logowania do banku, a URL w pasku adresu wyglądałby jak prawdziwy bank !
Być może, jeśli wyjaśnisz, dlaczego chcesz to zrobić, ludzie mogą zaproponować alternatywne podejście ...
[Edycja w 2011 r .: odkąd napisałem tę odpowiedź w 2008 r., Pojawiło się więcej informacji na temat techniki HTML5, która umożliwia modyfikację adresu URL, pod warunkiem, że pochodzi z tego samego źródła]
źródło
history.pushState()
.Ustawienia zabezpieczeń przeglądarki zapobiegają bezpośredniej modyfikacji wyświetlanego adresu URL. Można sobie wyobrazić podatne na ataki phishing.
Jedynym niezawodnym sposobem zmiany adresu URL bez zmiany stron jest użycie wewnętrznego linku lub skrótu. np .: http://site.com/page.html staje się http://site.com/page.html#item1 . Ta technika jest często stosowana w hijax (AJAX + zachowaj historię).
Robiąc to, często używam linków do akcji z haszem jako href, a następnie dodam zdarzenia kliknięcia z jquery, które używają żądanego skrótu do ustalenia i delegowania akcji.
Mam nadzieję, że postawi cię na właściwej drodze.
źródło
jQuery ma świetną wtyczkę do zmiany adresu URL przeglądarki, o nazwie jQuery-pusher .
JavaScript
pushState
i jQuery mogą być używane razem, na przykład:history.pushState(null, null, $(this).attr('href'));
Przykład:
Używanie tylko JavaScript
history.pushState()
, który zmienia odnośnik, który jest używany w nagłówku HTTP dla obiektów XMLHttpRequest utworzonych po zmianie stanu.Przykład:
window.history.pushState("object", "Your New Title", "/new-url");
Metoda pushState ():
pushState()
przyjmuje trzy parametry: obiekt stanu, tytuł (który jest obecnie ignorowany) i (opcjonalnie) adres URL. Przeanalizujmy każdy z tych trzech parametrów bardziej szczegółowo:obiekt stanu - Obiekt stanu to obiekt JavaScript powiązany z nowym wpisem historii utworzonym przez
pushState()
. Ilekroć użytkownik przechodzi do nowego stanu, uruchamiane jest zdarzenie popstate, a właściwość state tego zdarzenia zawiera kopię obiektu stanu wpisu historii.Obiekt stanu może być dowolnym obiektem, który może być szeregowany. Ponieważ Firefox zapisuje obiekty stanu na dysku użytkownika, aby można je było przywrócić po ponownym uruchomieniu przeglądarki przez użytkownika, na serializowaną reprezentację obiektu stanu nakładamy limit wielkości 640k znaków. Jeśli przekażesz obiekt stanu, którego reprezentacja szeregowa jest większa niż to
pushState()
, metoda zgłosi wyjątek. Jeśli potrzebujesz więcej miejsca, zachęcamy do skorzystania z sessionStorage i / lub localStorage.tytuł - Firefox obecnie ignoruje ten parametr, chociaż może go używać w przyszłości. Przekazanie tutaj pustego ciągu powinno być bezpieczne przed przyszłymi zmianami metody. Alternatywnie możesz przekazać krótki tytuł stanu, do którego się przeprowadzasz.
URL - ten parametr podaje adres URL nowego wpisu historii. Pamiętaj, że przeglądarka nie podejmie próby załadowania tego adresu URL po wywołaniu
pushState()
, ale może spróbować załadować adres URL później, na przykład po ponownym uruchomieniu przeglądarki przez użytkownika. Nowy adres URL nie musi być bezwzględny; jeśli jest względny, jest rozwiązany względem bieżącego adresu URL. Nowy adres URL musi być tego samego pochodzenia co bieżący adres URL; w przeciwnym raziepushState()
zgłosi wyjątek. Ten parametr jest opcjonalny; jeśli nie jest określony, jest ustawiony na bieżący adres URL dokumentu.źródło
Istnieje składnik Yahoo YUI (Menedżer historii przeglądarki), który może to obsłużyć: http://developer.yahoo.com/yui/history/
źródło
Galeria zdjęć Facebooka robi to za pomocą # skrótu w adresie URL. Oto kilka przykładowych adresów URL:
Przed kliknięciem „Dalej”:
Po kliknięciu „Dalej”:
Zwróć uwagę na hash-bang (#!), Po którym następuje nowy adres URL.
źródło
Istnieje wtyczka jquery http://www.asual.com/jquery/address/
Myślę, że tego potrzebujesz.
źródło
Dla mnie działa -
history.replaceState()
funkcja, która wygląda następująco -Ta strona nie zostanie ponownie załadowana, możesz z niej skorzystać w przypadku javascript
źródło
Zastanawiałem się, czy będzie to możliwe, dopóki ścieżka nadrzędna na stronie będzie taka sama, tylko coś nowego zostanie do niej dołączone.
Powiedzmy, że użytkownik jest na stronie:
http://domain.com/site/page.html
wtedy przeglądarka pozwala mi to zrobić,location.append = new.html
a strona staje się:http://domain.com/site/page.htmlnew.html
a przeglądarka jej nie zmienia.Lub po prostu pozwól tej osobie zmienić parametr get, więc pozwólmy
location.get = me=1&page=1
.Oryginalna strona staje się
http://domain.com/site/page.html?me=1&page=1
i nie jest odświeżana.Problem z # polega na tym, że dane nie są buforowane (przynajmniej tak mi się nie wydaje) po zmianie skrótu. To tak, jak za każdym razem, gdy ładowana jest nowa strona, podczas gdy przyciski wstecz i do przodu na stronie innej niż Ajax są w stanie buforować dane i nie tracą czasu na ponowne ładowanie danych.
Z tego, co widziałem, historia Yahoo już ładuje wszystkie dane naraz. Wygląda na to, że nie wykonuje żadnych żądań Ajax. Kiedy więc
div
używa się a do obsługi innej metody w godzinach nadliczbowych, dane te nie są przechowywane dla każdego stanu historii.źródło
mój kod to:
i akcja:
i przykład
To wszystko :)
źródło
Przedstawiam prostszą odpowiedź,
doda to
/abc
po nazwie domeny w adresie URL przeglądarki. Po prostu skopiuj ten kod i wklej go w konsoli przeglądarki i zobacz, jak adres URL zmienia się na „ https://stackoverflow.com/abc ”źródło
Odniosłem sukces z:
Po prostu dodaje
#myValue
się do bieżącego adresu URL. Jeśli chcesz wywołać zdarzenie na stronie Załaduj, możesz użyć tego samego,location.hash
aby sprawdzić odpowiednią wartość. Pamiętaj tylko, aby usunąć#
wartość zwróconą przezlocation.hash
npźródło