Jak używać obiektu location do zmiany URL-a? [JavaScript]

Obiekt location pozwala na przechowywanie adresu URL. Jak sobie radzić z tą klasą JavaScriptu i jak pobierać z niej informacje?

Obiekt location

Samo location posiada własności, które przedstawiają każdy z elementów adresu URL z osobna, jak również cały adres. URL złożony jest z następujących elementów:

protokół://host/ścieżka/#kotwica?ciągwyszukiwania

Własność location.href daje dostęp do całego URL-a. Do poszczególnych jego elementów dostęp zaś dają własności:

location.protocol – protokół (np. http:, ftp: czy file:),
location.host – nazwa hostu (np. webhosting.pl),
location.port – numer portu (zwykle pomijalny, np. 80),
location.pathname – ścieżka dostępu (np. /teksty/plik.html),
location.hash – kotwica (zakładka) w dokumencie (np. #koniec),
location.search – ciąg wyszukiwania, przez który wysyłane są parametry do skryptu (np. ?page=1&section=a).

Trzeba pamiętać, że protokół jest zachowywany bez znaków ':' oraz '//', w nazwie domeny zachowywany jest także numer portu, a ścieżka nie zawiera początkowego ukośnika '/'.

Jeśli chcemy wygenerować nowy adres, należy pamiętać o odpowiednim złożeniu tych elementów:

nowyURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname + "/" + [ew. dalsze elementy]

Metody location

Dzięki location możemy wykonać wiele użytecznych operacji na elementach strony WWW. Wykorzystuje się do tego najczęściej obiekt window.location. Przechowuje on adres URL obecnie załadowanej w przeglądarce strony. Jeśli funkcja JavaScriptu zmieni zatem własność window.location.href, strona powinna zostać przeładowana. Powinna – nie zawsze musi, dlatego w JavaScripcie dysponujemy metodami, które pozwalają na wymuszenie takiej sytuacji. Są to:

location.reload() – pozwala na odświeżenie aktualnego dokumentu,
location.replace(adres) – pozwala na załadowanie nowego dokumentu bez pozostawiania w histori sesji przeglądarki poprzedniego dokumentu.

Manipulacja URL za pomocą location

Możemy na przykład w prosty sposób przekierować naszych użytkowników:

Można też przesłać użytkownika do innej kotwicy w dokumencie, korzystając z własności obiektu:

Lub wymusić przeładowanie strony:

albo

jeśli chcemy wymusić pobranie strony z serwera, bez korzystania z pamięci podręcznej przeglądarki.

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

3 skomentuj »

Komentarze

#1 macem 2009-11-05 10:09:17 0
tyle ze warto pamietac ze obecnie nie wstawiamy inline javascript, lepiej podpiac te eventy (onclick) w oddzielnym pliku js.
IP: 83.29.142.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.4) Gecko/20091016 Firefox/3.5.4
#2 imb 2011-09-07 12:25:55 0
Mi się akurat przydało, dzięki.

Audyt SEO
IP: 62.69.245.[...] Mozilla/5.0 (Windows NT 6.1; WOW64; rv:6.0.2) Gecko/20100101 Firefox/6.0.2
#3 kameo 2012-01-12 12:34:19 0
Super, zazwyczaj uzywalem tylko location = 'nowa lokacja . html ', nigdy nie zaglebialem sie bardziej.

Dobry artykul!

fotografia sesje zdjeciowe
IP: 79.163.1.[...] Mozilla/5.0 (Windows NT 5.1; rv:9.0.1) Gecko/20100101 Firefox/9.0.1

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.