Czy istnieje sposób na zmianę paska adresu przeglądarki bez odświeżania strony?

92

Tworzę aplikację internetową. W nim mam sekcję o nazwie kategorie, która za każdym razem, gdy użytkownik kliknie jedną z kategorii, panel aktualizacji ładuje odpowiednią zawartość.

Po kliknięciu przez użytkownika kategorii, z której chcę zmienić adres URL paska adresu przeglądarki

www.mysite.com/products

do czegoś takiego

www.mysite.com/products/{selectedCat}

bez odświeżania strony.
Czy istnieje jakiś rodzaj interfejsu API JavaScript, którego mogę użyć, aby to osiągnąć?

url address-bar

— Luiso
źródło

158

Dzięki HTML5 możesz modyfikować adres URL bez ponownego ładowania:

Jeśli chcesz dodać nowy post do historii przeglądarki (np. Przycisk Wstecz zadziała)

window.history.pushState('Object', 'Title', '/new-url');

Jeśli chcesz tylko zmienić adres URL bez możliwości powrotu

window.history.replaceState('Object', 'Title', '/another-new-url');

Obiekt może służyć do nawigacji Ajax:

window.history.pushState({ id: 35 }, 'Viewing item #35', '/item/35');

window.onpopstate = function (e) {
  var id = e.state.id;
  load_item(id);
};

Przeczytaj więcej tutaj: http://www.w3.org/TR/html5-author/history.html

Rozwiązanie awaryjne: https://github.com/browserstate/history.js

— Alfred
źródło

4

+1 Uwaga; zmieniają pathi / lub query stringw adresie URL; nie mogą zmienić protokołu, domeny ani portu (ponieważ byłby to problem z bezpieczeństwem, jak wskazywali inni). Powyższa hashfunkcja może zmienić kotwicę (lub identyfikator fragmentu)

— Chris S

2

po prostu mówiąc, w twoim przykładzie '/ item / 35'}, dodano dodatkowy}

— Zhanger

Na marginesie: czy istnieje sposób na umożliwienie indeksowania tych adresów URL w Google?

— Peter Featherstone,

1

Wydaje się, że lepszą biblioteką jest github.com/browserstate/history.js , jest ona aktywnie utrzymywana i szeroko używana, podczas gdy fortes-history.js był bezczynny przez 3 lata.

— Gonfi den Tschal

2

Pamiętaj, że Firefox nie obsługuje tytułu, więc użyj document.title = "nowy tytuł".

— 0fn

31

Aby dodać do tego, co już powiedzieli faceci, edytuj właściwość window.location.hash tak, aby pasowała do adresu URL, który chcesz w funkcji onclick.

window.location.hash = 'category-name'; // address bar would become http://example.com/#category-name

— roborourke
źródło

czy istnieje sposób na zmianę adresu URL bez symbolu „#” w adresie URL?

— SHEKHAR SHETE

7

Uważam, że bezpośrednie manipulowanie paskiem adresu na zupełnie inny adres URL bez przechodzenia do tego adresu URL jest niedozwolone ze względów bezpieczeństwa, jeśli jesteś z tego zadowolony

www.mysite.com/products/#{selectedCat}

tj. link w stylu kotwicy na tej samej stronie, a następnie przejrzyj różne skrypty historii / przycisku „Wstecz”, które są obecnie obecne w większości bibliotek javascript.

Wzmianka o panelu aktualizacji prowadzi mnie do przypuszczenia, że używasz asp.net, w takim przypadku kontrola historii Ajax asp.net jest dobrym miejscem do rozpoczęcia

— Justin Wignall
źródło

3

Nie sądzę, żeby to było możliwe (przynajmniej zmiana na zupełnie inny adres), ponieważ byłoby to nieintuicyjne niewłaściwe użycie paska adresu i mogłoby promować ataki phishingowe.

— Galwegian
źródło

Zamiast być nieintuicyjnym, myślę, że nie powinieneś być w stanie tego zrobić, ponieważ może to zostać wykorzystane do ataków phishingowych. W każdym razie to +1.

— OregonGhost,

Tak, to właśnie przyszło mi do głowy. Nie jest to dobry pomysł. Dzięki OregonGhost.

— Galwegian

1

Myślę , że to możliwe ... Sprawdź Wikimapię ... Gdy przeciągasz mapę, adres URL ulega zmianie ...

— Shivasubramanian A

@ Shivasubramanian-a: Spojrzałem na Wikimapię i rzeczywiście, oni po prostu używają techniki sugerowanej przez somej i opisanej przez sanchothefat: po prostu zmieniając nazwę kotwicy. Który jest bezpieczny przed phishingiem ...

— PhiLho,

-1

Nie można tego zrobić tak, jak to mówisz. Metoda sugerowana przez somej.net jest najbliższa, jaką możesz uzyskać. W rzeczywistości jest to bardzo powszechna praktyka w erze AJAX. Nawet Gmail tego używa.

— aalaap
źródło

-1

„window.location.hash”

zgodnie z sugestią sanchothefat powinien być jedynym sposobem na zrobienie tego. Ponieważ we wszystkich miejscach, w których widziałem tę funkcję, jest cały czas po znaku # w adresie URL.