Jak zrobić przekierowanie w JavaScript?
Treść dodana: 08 grudnia 2015.
Aby lepiej zrozumieć działanie kodu proponuję zapoznanie się z artykułem opisującym protokół HTTP.
Bardzo często pisząc kod w JS dochodzimy do sytuacji, iż potrzebujemy wykonać konkretny zbiór czynności a na koniec, przekierować użytkownika pod inny adres. Przekierowanie takie można wykonać na co najmniej kilka sposobów. Przyjrzyjmy się na początek obiektowi “Location”:
console.log(window.location);
hash "#idelementu" host "wwwgo.pl" hostname "wwwgo.pl" href "https://wwwgo.pl/advice/show/1/jak_zrobic_przekierowanie_w_javascript%3F#idelementu" origin "https://wwwgo.pl" //dostępne w późniejszych wersjach przeglądarek password "" pathname "/advice/show/1/jak_zrobic_przekierowanie_w_javascript%3F" port "" protocol "https:" search "" username ""
Zwrócone zostały wszystkie dane adresu widocznego w przeglądarce (dodałem jeszcze #idelementu). Pokrótce można je opisać jako:
hash – zawiera string reprezentujący # oraz nazwę
host – zawiera nazwę hosta oraz opcjonalnie port (porty domyślne są pomijane dlatego nie został wyświetlony wwwgo.pl:443)
hostname – nazwa zawierająca domenę
href – string zawierający cały URL
origin – zawiera reprezentację Unicode adresu. W IE dostępne od wersji 11, działa z błędami w tej przeglądarce.
password – string zawierający hasło w adresie typu https://user:pass@wwwgo.pl
username – string zawierający nazwę użytkownika czyli z przykładowe adresu powyżej – “user”
pathname – zawiera całą ścieżkę z pominięciem domeny, zaczynając od /
port – port na którym wykonane zostało żądanie. Dla domyślnych przeglądarki mogą pomijać
protocol – protokół oraz końcowy dwukropek
search – inaczej query string, zaczynając od ?. Dla przykładowego adresu wwwgo.pl?id=1 będzie to ?id=1
Obiekt Location zawiera również kilka metod:
assign(url) – przypomina trochę przekierowanie nagłówkami (w PHP funkcja header()). Przenosi do nowego adresu URL. Poprzedni adres jest widoczny w History API można zatem cofnąć się do poprzedniej strony, z której przekierowanie nastąpiło
replace(url) – działa podobnie jak assign() z tym że strona usuwana jest z History API – nie będzie można cofnąć się do strony przekierowującej
reload(forcedReload) – powoduje odświeżenie aktualnej strony. Przyjmuje parametr Boolean który ustawiony na true wymusza odświeżenie cache. Inaczej strony może być wczytana z cache, czyli np. w nieaktualnej już wersji
Korzystając z samego obiektu Location możemy wykonać co najmniej 4 różne przekierowania:
window.location.assign('http://nowy.url'); window.location.replace('http://nowy.url'); window.location.reload(true); window.location.href = 'http://nowy.url'; window.location = 'http://nowy.url'; // równoznaczne z ustawieniem href window.location = window.location.host; // przekierowanie na stronę główną // przekierowanie po 3 sekundach window.setTimeout( function() { window.location = "http://nowy.url"; }, 3000 );
Za pomocą obiektu History:
window.history.back(); // odpowiednik przycisku wstecz w przeglądarce window.history.forward(); // odpowiednik przycisku naprzód
Gdy korzystamy z biblioteki jQuery możemy również pośrednio manipulować obiektem Location:
$(location).attr('href', 'http://nowy.url'); $(window).attr('location', 'http://nowy.url'); $(location).prop('href', 'http://nowy.url');
Myślę jednak że nie ma powodu dokładać parserowi ekstra pracy i najlepiej, z czystym sumieniem, korzystać z metod dostępnych bezpośrednio w JavaScript.
Jeszcze jednym sposobem przekierowania jest zasymulowanie kliknięcia w przycisk albo link za pomocą natywnej metody click():
$('a').get(3).click(); document.querySelector('a').click();
Może zdarzyć się jeszcze jedna sytuacja w której mamy podpięte zdarzenie i w późniejszym etapie chcielibyśmy je wywołać:
// jQuery $('#menu').on('click', 'a', function(e) { e.preventDefault(); window.location = $(this).attr('href') }); $('#menu a').trigger('click');
Dodaj komentarz
- sieć
- http
- apache
- ssl
- php
- javascript
- jquery
- html
- pdo
- sql server
- ajax
- sql
- mysql
- postresql
- mongodb
- spl
- composer
- css
- psr
- programowanie
- regex
Wyszukaj interesujące Cię słowa kluczowe pośród istniejących porad.
Komentarze
Nie ma jeszcze żadnych komentarzy do wyświetlenia. Może chcesz zostać pierwszą osobą która podzieli się swoją opinią?