jquery: zmienić adres URL bez przekierowywania? [duplikat]
Możliwy duplikat:
Modyfikuj adres URL paska adresu w aplikacji AJAX, aby pasował do bieżącego stanu
Jak mogę zmienić adres URL bez przekierowanie strony?
Na przykład, gdy klikam na poniższy link:
<a href="http://mysite.com/projects/article-1" class="get-article">link</a>
Pobieram adres URL z linku:
var path = object.attr('href');
Jeśli zrobię to poniżej, strona zostanie przekierowana:
window.location = path;
Chcę zrobić coś takiego Strona, Po kliknięciu na obrazek, wywołanie ajax pobierze żądaną stronę i adres URL w oknie również zostanie zmieniony, tak, że ma ścieżkę do tego, co klikasz.
7 answers
Uwaga: history.pushState() jest teraz obsługiwana-zobacz inne odpowiedzi.
Ty nie możesz zmienić całego adresu url bez przekierowywania, zamiast tego możesz zmienić hash .
Hash jest częścią adresu url, która następuje po symbolu#. Początkowo zamierzano skierować cię (lokalnie) do sekcji dokumentu HTML, ale możesz go czytać i modyfikować za pomocą javascript, aby używać go nieco jak zmiennej globalnej.
Jeśli dobrze się zastosuje, technika ta jest przydatna na dwa sposoby:
-
Historia przeglądarki zapamięta każdy krok, który wykonałeś (od zmiany adresu url+hash).]}
- możesz mieć adres, który łączy nie tylko do konkretnego dokumentu html, ale także daje javascript wskazówkę o tym, co robić. Oznacza to, że wskazujesz stan w aplikacji internetowej.
Aby zmienić hash możesz zrobić:
document.location.hash = "show_picture";
Aby obserwować zmiany hasha musisz zrobić coś w stylu:
window.onhashchange = function(){
var what_to_do = document.location.hash;
if (what_to_do=="#show_picture")
show_picture();
}
Oczywiście hash jest tylko ciągiem znaków, więc możesz z nim robić, co chcesz. Na przykład możesz umieścić tam cały obiekt, jeśli użyjesz JSON do stringify.
Istnieją bardzo dobre biblioteki JQuery do robienia zaawansowanych rzeczy z tym.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-19 22:07:36
Zobacz tutaj - http://my.opera.com/community/forums/topic.dml?id=1319992&t=1331393279&page=1#comment11751402
Zasadniczo:
history.pushState('data', '', 'http://your-domain/path');
Możesz manipulować obiektem historii, aby to działało.
Działa tylko na tej samej domenie, ale ponieważ jesteś zadowolony z używania hash tag, nie powinno to mieć znaczenia.
Oczywiście trzeba by przetestować między przeglądarkami, ale skoro to zostało opublikowane na forum Opery, mogę założyć, że będzie działać w Operze, i właśnie Przetestowałem go w Chrome i działało dobrze.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-03-12 12:58:21
Ta strona używa części" fragment "adresu url: rzeczy po"#". To nie jest wysyłane do serwera przez przeglądarkę jako część żądania GET, ale może być używane do przechowywania stanu strony. Tak więc możesz zmienić fragment bez powodowania odświeżania lub przeładowywania strony. Gdy Strona się ładuje, Twój javascript odczytuje ten fragment i odpowiednio aktualizuje zawartość strony, pobierając dane z serwera za pomocą żądań ajax w razie potrzeby. Aby przeczytać fragment w js:
var fragment = location.hash;
Ale zauważ, że wartość ta będzie zawierać znak " # " na początku. Aby ustawić fragment:
location.hash = "your_state_data";
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-25 15:00:02
Nie możesz robić tego, o co prosisz(a powiązana Strona też tego nie robi).
Możesz jednak zmodyfikować część adresu url po znaku #, który nazywa się fragmentem , Tak:
window.location.hash = 'something';
Fragmenty czy , a nie są wysyłane na serwer (więc na przykład samo Google nie może odróżnić http://www.google.com/ od http://www.google.com/#something), ale mogą być odczytywane przez Javascript na twojej stronie. Z kolei ten Javascript może zdecydować się na wykonanie innego AJAX żądanie oparte na wartości fragmentu, czyli jak strona, z którą się łączyłeś, prawdopodobnie to robi.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-25 14:55:04
Osiąga się to poprzez przepisywanie adresów URL, a nie poprzez zaciemnianie adresów URL, czego nie można zrobić.
Innym sposobem, aby to zrobić, jak już wspomniano, jest zmiana hashtagu, z
window.location.hash = "/2131/"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-25 14:55:09
Nie, bo to otworzyłoby wrota do phishingu. Jedyną częścią URI, którą możesz zmienić, jest fragment (wszystko po #). Możesz to zrobić ustawiając window.location.hash.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-25 14:54:06
Naprawdę nie można zmienić całego adresu URL w pasku lokalizacji bez przekierowania (pomyśl o problemach z bezpieczeństwem!).
Możesz jednak zmienić hash część (co po #) i przeczytać, że: location.hash
Ps. zapobiega domyślnemu przekierowaniu onclick linku przez coś takiego:
$("#link").bind("click",function(e){
doRedirectFunction();
e.preventDefault();
})
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-07 13:27:06