Languages
[Edit]
PL

Na ile sposobów mo┼╝na wykona─ç operacj─Ö redirect z poziomu JavaScript?

9 points
Created by:
JustMike
26120

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?

 

Nowa moc?
Nowa moc?

 

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

Lokacja? tak ale chodzi tutaj o adres strony, a nie serwera :P
Lokacja? tak ale chodzi tutaj o adres strony, a nie serwera :P

 

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 funkcji assign(),
     
  • 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.

 

Mała-wielka rzecz! Na pewno ucieszyła nie jednego Front-end-owca
Mała-wielka rzecz!
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:

  • url to 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─ç"...
  • state i title opisany 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.

 RedirectReplace redirectZalety i wady
Location API

location
  .assign(u)

location
  .href = u

location
  .replace(u)

+ 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

history
  .pushState
  (s, t, u)

history
  .replaceState
  (s, t, u)

+ Zaoszcz─Ödza na czasie ┼éadowania strony, trzymaj─ůc aktualny stan.

- Prze┼éadowanie zawarto┼Ťci trzeba samemu zaprogramowa─ç.

- Nawigacja tylko w domenie.

Link + Click

var link = ...

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 atrybutem target="_blank" dobra przegl─ůdarka zablokuje operacj─Ö. Bez atrybutu, szacuj─ů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.
Native Advertising
50 000 ad impressions - 449$
­čÜÇ
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join