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');

Komentarze

Nie ma jeszcze żadnych komentarzy do wyświetlenia. Może chcesz zostać pierwszą osobą która podzieli się swoją opinią?

Dodaj komentarz

*
Nazwa zostanie wyświetlona wraz z komentarzem. Możesz też utworzyć nowe konto w serwisie, dzięki czemu uzyskasz dodatkową funkcjonalność.
*
Akceptowana jest ograniczona składnia Textile. Wszystkie tagi HTML zostaną usunięte.