Top community members
All Wiki Articles Create Wiki Article

Welcome to Dirask IT community! ÔŁĄ ­čĺ╗
We are community of people that helps each other.

If you are beginner in IT field, you are more then welcome to ask questions, it will help you to learn faster. We are here to help you.

We are always beginner in something, we just need to remember it along the way.

there are no wrong questions - Ask Question

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

0 contributions
9 points

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.
0 contributions

Suggested wiki articles:

Suggested findings

Let's do the work and have some fun
  • Dirask is online IT community for professionals and hobbyist to share their knowledge and help each other in extraordinary easy way. ÔŁĄ ­čĺ╗ ­čÖé
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    we will help you. ­čĹŹ Ôťö ­čŽä
Read more