location
Obiekt z informacjami o adresie bieżącej strony. Pozwala odczytać jego części i przejść pod inny adres.
- Zwraca
- Obiekt
Location. Metodyassign(),replace()ireload()zwracająundefined.
Przykład
#console.log(location.href)
console.log(location.origin)
console.log(location.pathname)
console.log(location.search)
console.log(location.hash)
console.log(new URLSearchParams(location.search).get('lekcja'))https://codeworlds.com/kursy/javascript?lekcja=5#zadania https://codeworlds.com /kursy/javascript ?lekcja=5 #zadania 5
Wynik dotyczy strony otwartej pod adresem https://codeworlds.com/kursy/javascript?lekcja=5#zadania. Przykłady na tej stronie działają w ramce bez własnego adresu, w której location.href ma wartość about:srcdoc, dlatego ten kod nie uruchamia się w podglądzie.
Definicja i zastosowanie
#Obiekt location (dostępny też jako window.location i document.location) opisuje adres strony otwartej w karcie. Ma podobne właściwości jak obiekt URL: href (pełny adres), origin, protocol, host, hostname, pathname, search i hash. Brakuje mu jednak searchParams, dlatego parametry zapytania odczytasz przez new URLSearchParams(location.search).
W odróżnieniu od obiektu URL zmiana location powoduje nawigację. Przypisanie location.href = "/kursy" albo wywołanie location.assign() przechodzi pod nowy adres i dodaje wpis do historii. location.replace() robi to samo, ale zastępuje bieżący wpis, więc przycisk „Wstecz” nie wróci na poprzednią stronę. location.reload() przeładowuje stronę.
Wyjątkiem jest hash. Zmiana samego fragmentu, np. location.hash = "#zadania", nie przeładowuje strony, tylko przewija do elementu o danym id i wywołuje zdarzenie hashchange. Jeśli chcesz zmienić adres bez nawigacji i bez przewijania, użyj history.pushState().
Składnia
#location.href
location.origin
location.pathname
location.search
location.hash
location.href = url
location.assign(url)
location.replace(url)
location.reload()Parametry
#url
napis
Adres docelowy dlaassign()ireplace(), bezwzględny albo względny.
Więcej przykładów
#const params = new URLSearchParams(location.search)
const target = new URL(params.get('powrot') ?? '/panel', location.origin)
if (target.origin === location.origin) {
location.assign(target)
} else {
location.assign('/panel')
}Adres z parametru powrot jest rozwiązywany względem domeny strony. Sprawdzenie origin chroni przed sytuacją, w której ktoś podsunie link przekierowujący po zalogowaniu na obcą stronę.
window.addEventListener('hashchange', () => {
console.log('Nowa sekcja:', location.hash)
})
location.hash = 'zadania'
console.log(location.hash)#zadania Nowa sekcja: #zadania
Adres zmienia się od razu, a zdarzenie hashchange przychodzi chwilę później, dlatego jego wpis jest drugi. Strona się nie przeładowuje, tylko przewija do elementu z id="zadania".
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Do odczytu parametrów używaj
new URLSearchParams(location.search)zamiast ręcznego cięcia napisu. - Przekierowując na adres z parametru, sprawdź, czy prowadzi do Twojej domeny. Inaczej ktoś może podesłać link, który przeniesie użytkownika na obcą stronę.
- Po wylogowaniu używaj
location.replace(). Przycisk „Wstecz” nie zaprowadzi wtedy z powrotem do panelu użytkownika.
Powiązane hasła
#- URLObiekt do tworzenia, odczytywania i zmieniania adresów URL. Rozkłada adres na części: protokół, host, ścieżkę i parametry.
- URLSearchParamsObiekt do odczytu i budowania parametrów zapytania w adresie, czyli części po znaku ?, np. ?kurs=js&strona=2.
- history.pushState()Dodaje nowy wpis do historii przeglądarki i zmienia adres w pasku bez przeładowania strony.
- EventTarget.addEventListener()Rejestruje funkcję wywoływaną za każdym razem, gdy na elemencie wystąpi zdarzenie, np. kliknięcie.
- sessionStoragePamięć przeglądarki na pary klucz i wartość, która działa tylko w bieżącej karcie i znika po jej zamknięciu.
Widzisz błąd albo brakuje przykładu? Napisz do nas.