Na ile sposobów można wykonać operację redirect z poziomu JavaScript?
Jakiś czas temu zacząłem się zastanawiać, na ile sposobów można wykonać operację redirect z poziomu kodu JavaScript uruchomionego w przeglądarce?
Nie od dziś wiadomo, że już na samym początku przeglądarki oferowały wraz z naszym kochanym JavaScript-em Location API (czyli window.location obiekt), za pomocą którego można przekierować aktualną stronę na zupełnie inną. Jako alternatywę możemy popatrzeć na istniejące też dziwactwa - tak dziwactwa, nie przesłyszeliście się! - bo tak ośmielę się nazwać tworzenie linku, po to, aby wykonać na nim kliknięcie i przekierować naszą stronę gdzie indziej. I powiem wam, że wierzę, że na pewno znajdzie się taki człowiek, który to zrobi :) bo czemu nie... jeśli da się, heh... To mi przypomina mojego małego kota, który zamiast iść prosto, próbuje przecisnąć się przez wąską szczelinę obok po to, żeby zaraz kontynuować swoją podróż - bo koty tak mają.
Gdy przyszedł czas na HTML 5, twórcy postarali się o to, aby wzbogacić zestaw istniejących funkcji o dodatkowe rozwiązania - jest nim History API (czyli window.history obiekt).
Ale zaraz, co takiego ma to nowe API, czego nie ma Location API?
heh, ok, już pokrótce wyjaśniam:
History API umożliwia nam nawigowanie bez potrzeby przeładowywana strony. Ale zaraz, zaraz, ktoś dobrze obeznany w temacie mógłby mi zadać pytanie: co wspólnego z redirect-em ma History API? Jest to redirect, dla którego musimy sami obsłużyć to, w jaki sposób nastąpi przeładowanie zawartości strony - co nie zmienia faktu, że następuje zmiana URL w polu adresu przeglądarki. Po odświeżeniu strony nastąpi załadowanie strony znajdującej się pod nowym adresem. Tę technikę wykorzystują współczesne frameworki Front-end-owe takie jak Angular, React, VUE, itp. Została ona przykryta tylko przez Routing API dostarczone przez różnego rodzaju moduły routing-u.
Location API
Dostarcza ono 3 podstawowe podejścia:
location.assign('http://my-new-url.com')
prze nawiguje do wskazanej strony,
locartion.href = 'http://my-new-url.com'
jest to nic innego jak alternatywa do funkcjiassign(),
location.replace('http://my-new-url.com')
usunie z historii przeglądanych stron aktualną stronę oraz wstawi nowy wpis, otwierając wskazany link - a raczej ją nadpisze,
- no dobra, są jeszcze:
location.hostname,location.pathname,location.search, itp.
lecz zmieniają one tylko specyficzną część URL więc je pominąłem :)
Z tym api możemy przekierować naszą stronę na na dowoly link.
<!doctype html>
<html>
<body>
<script>
location.replace('https://dirask.com/about');
//location.assign('https://dirask.com/about');
//location.href = 'https://dirask.com/about';
</script>
</body>
</html>
Techniczą wersję artykułu znajdziecie tutaj.
Do czego mógłbym użyć takiego API? Myślę, że fajnym i prostym przykładem mógłby być redirect na wersję mojej strony z https.
<!doctype html>
<html>
<head>
<script>
if (location.protocol === 'http') {
location.protocol = 'https';
}
</script>
</head>
<body>Treść strony...</body>
</html>
History API
Dało ono możliwości szybszego przeładowywania stron.
Na pewno ucieszyła nie jednego Front-end-owca
Dostarcza 2 najważniejsze funkcje:
history.pushState(state, title, url)
dorzuca do historii nawigacji kolejny wpis,
history.replaceState(state, title, url)
podmienia w historii nawigacji aktualny wpis,
Gdzie na uwagę zasługuje:
urlto adres, który wyświetli się nam w polu adresu przeglądarki, nie powodując przeładowania strony - "małym" ograniczeniem jest fakt, że nawigować możemy tylko w obrębie tej samej domeny!!! no i jeszcze trzeba przeładowanie zawartości strony "obkodzić"...stateititleopisany został w dokumentacji tutaj i tutaj.
Po odświeżeniu naszej strony załadowany zostanie kod z pod aktualnego URL.
Link i symulacja akcji click
A teraz czas na dziwactwa, jakie oferuje sam link i funkcja click(). Może nie będę się rozwodził i pokarzę to na przykładzie:
<html>
<body style="height: 300px">
<a id="link" href="https://dirask.com"></a>
<script>
var element = document.querySelector('#link');
element.click();
</script>
</body>
</html>
Polecam skopiować sobie przykład i uruchomić lokalnie :)
Podsumowanie
Postanowiłem zebrać wszystko razem w jednej tabelce.
| Redirect | Replace redirect | Zalety i wady | |
| Location API |
| location |
+ Nawigowanie na dowolny link. ~ Utrata aktualnego stanu? - nie do końca, bo istnieje trick z hash-em - jest to temat na osobny artykuł. |
| History API |
|
|
+ Zaoszczędza na czasie ładowania strony, trzymając aktualny stan. - Przeładowanie zawartości trzeba samemu zaprogramować. - Nawigacja tylko w domenie. |
| Link + Click |
| Brak |
- Rozwiązanie "na około". - Może zostać zablokowane przez przeglądarkę. |
Wnioski:
- Jeśli chcemy wykonać nawigację, warto użyć Location API.
- Gdy zależy nam na przeładowaniu tylko pewnej części strony oraz zaoszczędzić również na czasie jej ładowania, Hisotry API będzie odpoweidnie - tak robią wymienione powyżej frameworki.
- Link + click - według uznania :)
z atrybutemtarget="_blank"dobra przeglądarka zablokuje operację. Bez atrybutu, szanujące się strony również sobie poradzą;)
Co sądzicie o takim podziale?
Czy macie jeszcze jakiś pomysł jak wykonać redirect?
Piszcie proszę w komentarzach - chętnie wymienię się spostrzeżeniami.
| Jeszcze raz zapraszam na techniczną wersję artykułu tutaj. |