In how many ways can you redirect your web page in JavaScript?

Some time ago I got an idea to count, in how many ways you can make redirect operation from the level of JavaScript code running in the browser?

It is known for a long time that, at the very beginning, browsers offered Location API (i.e. window.location object) with JS, that helps to redirect the current page to a completely different one. As an alternative to it, we can look at the existing quirks - yes quirks, you haven't heard yourself! - because that's what I am going to call link creation in order to click on it and redirect our site elsewhere. And I will tell you that I believe that there will definitely be a man who will do it :) because why not ... if it is possible, heh ... It reminds me of my little cat, who instead of going straight, tries to squeeze through a narrow crack, next to it to continue its journey - because cats have this way.

Before HTML 5 appeared, the developers who designed API put a lot of effort to provide special functions to navigate that was needed - it is the History API (i.e. window.history object). Ok, I know a lot of solutions come from suggested and already implemented solutions in many browsers.

But what's new about this new API that Location API doesn't have?

heh, ok, I will explain briefly:

The History API allows us to navigate without reloading the page. But wait..., someone well versed in the subject could ask me the question: what does the History API have common with a redirect? This is a redirect for which we need to change the content by own logic in own way - which does not change the fact that the URL is changed in the browser's address field after the operation. After refreshing the page, the page associated with the new address will be load. Modern Front-end frameworks such as Angular, React, VUE, etc. use this technique. It is only covered by the Routing API provided by various types of routing modules.

Location API

It provides 3 basic approaches:

location.assign('http://my-new-url.com')
navigates to the indicated page,
locartion.href = 'http://my-new-url.com'
it is nothing more than an alternative approach to the assign() function,
location.replace('http://my-new-url.com')
removes the current page from the history of browsed pages and inserts a new entry with opening the link - overwriting actual link in history,
okay there are still:
location.hostname, location.pathname, location.search, e.t.c.
but they only change a specific part of the URL so I skip it :)

With this API we can redirect our website to any link - even with other origin.

<!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>

The technical version of the article can be found here.

How such an API can be used for? I think a cool and simple example could be redirect operation to the https version of my page if needed.

<!doctype html>
<html>
<head>
  <script>

    if (location.protocol === 'http') {
        location.protocol = 'https';
    }

  </script>
</head>
<body>Page content...</body>
</html>

History API

It gives you the ability to reload pages faster.

It provides the 2 most important functions:

history.pushState(state, title, url)
adds another entry to the navigation history, changing url,
history.replaceState(state, title, url)
replaces the current entry in the navigation history, changing url,

Where noteworthy:

url argument is the address that will be displayed in the URL field of the browser without causing the page to reload - the "small" limitation is the fact that we can only navigate within the same domain!!! and later need to overload the page content with own logic...
state and title arguments are described in the MDN documentation.

After refreshing our website, the source code will be loaded from the current URL - normal scenario of page loaging.

Link and simulated click action

And now it's time for quirks offered by the link itself and the click() function. Maybe I will show it on an example:

<html>
<body>
  <a id="link" href="https://dirask.com"></a>
  <script>

    var element = document.querySelector('#link');
    element.click();

  </script>
</body>
</html>

Conclusions:

If you want to navigate, use just Location API.
When we want to reload only a certain part of the page and speed up on loading time, History API will be appropriate - so do the frameworks listed above.
Link + click - at your discretion :) for target="_blank" attribute a good browser will block the operation. Without an attribute a lot of most popular pages will manage it like google ;)

Once again, I invite you to the technical version of the article here.

Alternative version of this article is available here.

Blog

In how many ways can you redirect your web page in JavaScript?

undqurek

Location API

History API

Link and simulated click action

Join Our Newsletter. No Spam, Only the good stuff.

Related