How To Redirect A Webpage In Javascript – Simple Examples

Welcome to a quick tutorial on how to redirect a web page in Javascript. Need to redirect the user to another page using Javascript? Maybe after submitting a form or successful login?

There are 3 possible ways to redirect the webpage in Javascript:

  • location.href = "URL";
  • location.assign("URL");
  • location.replace("URL");

But just what is the difference between each of them? Which one is correct? Which one should we use? Read on to find out!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Redirection Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

WEBPAGE REDIRECTION

All right, let us now get into more examples of how to do a webpage redirection in Javascript.

 

1) LOCATION.HREF

1-location-href.html
<input type="button" value="Go" onclick="location.href='https://code-boxx.com'"/>

As in the introduction above, there are 3 main ways to change the URL. The first is location.href and it actually holds the current full URL; Assigning a URL to location.href will navigate the user to another page. Take note – location.href is more like simulating a mouse click on a link, and not doing a redirection.

 

2) LOCATION.ASSIGN() & LOCATION.REPLACE()

2-location-fn.html
<input type="button" value="Assign" onclick="location.assign('https://code-boxx.com')"/>
<input type="button" value="Replace" onclick="location.replace('https://code-boxx.com')"/>

Next, we have location.assign() and location.replace(). While these two are seemingly similar, but take note of the difference:

  • location.assign() – Will add the current page to the browsing history before redirecting. That is, users can hit the back button and navigate back as usual.
  • location.replace() – Will not add the current page to the browsing history. That is, users cannot hit the back button and return to the last page.

Just to take note – location.href = "URL" will also add the current page to the browsing history.

 

 

3) REDIRECT IN THE SAME PAGE – SCROLL TO BOOKMARK

3-bookmark.html
<script>
  function goToBookmark () {
    location.hash = 'bookmark';
    document.getElementById("bookmark").scrollIntoView();
  }
</script>

<span onclick="goToBookmark()">Go to bookmark</span>
<div style="height: 2000px"></div>
<span id="bookmark">The Bookmark.</span>

Quick recap, to scroll to an element on the same page, the “normal HTML way” is to create an internal bookmark:

  • Give the element an ID. For example, <p id="target">Foo</p>.
  • Point the anchor link to the bookmark. For example, <a href="#target">Go To Foo</a>.

In Javascript, we can access the bookmark portion of the URL with location.hash. But take note, if we simply set location.href = "BOOKMARK" in Javascript, that will not trigger a “scroll to element”. We have to manually do so with ELEMENT.scrollIntoView().

 

4) LOCATION – WHAT IS IT!?

4-location.html
console.log(location.href);
console.log(location.protocol);
console.log(location.host);
console.log(location.hostname);
console.log(location.port);
console.log(location.pathname);
console.log(location.search);
console.log(location.hash);
console.log(location.username);
console.log(location.password);
console.log(location.origin);

So after all the talk about the almighty location, just what the heck is it? It is nothing but a simple object that holds all the information on the current URL. Yep, if you want to know the user’s current URL and any of the parts – This is the place to find it all.

 

 

5) LOCATION OR WINDOW.LOCATION?

5-win-loc.html
console.log(location);
console.log(window.location);
console.log(window.location === location); // true

In some other tutorials, you will see people using window.location instead of location. Is there a difference? Apparently, the answer is no. location and window.location refers to the same thing. So go ahead and be a lazy code ninja. It is safe to use location and drop that windows part.

 

6) NAVIGATION HISTORY

6-history.html
<input type="button" value="Back" onclick="window.history.back()"/>
<input type="button" value="Forward" onclick="window.history.forward()"/><script>

<h1>GO</h1>
<div>
  go(-1) is equivalent of going back to last page, 
  -2 to previous 2 pages, and so on...
</div>
<div>
  Captain Obvious - 
  go(1) will forward to next page.
  go(2) next 2 pages, and so on...
</div>
<input type="button" value="Go" onclick="window.history.go(-1)"/>

Ok, this is not quite a “redirection”, but an extra – We can manually fire the navigation history “back” and “forward” in Javascript too. Good to know, may be useful to some of you guys.

 

 

USEFUL BITS & SUMMARY

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

WINDOW.NAVIGATE!?

If you have been poking around the Internet, you might have spotted some tutorials using window.navigate() to redirect the page.  Just a short note that window.navigate() is an ancient Internet Exploder Explorer thing. It is not supported in many modern browsers – Avoid… Just don’t use this anymore.

 

THE SUMMARY

Property/Function Description Reference Link
location.href Get/set the current URL. Click Here
location.assign() Redirect the user to the specified URL. Recorded in browsing history. Click Here
location.replace() Redirect the user to the specified URL. Not recorded in browsing history. Click Here
ELEMENT.scrollIntoView() Scroll the element into view. Click Here

 

INFOGRAPHIC CHEAT SHEET

How To Redirect URL in Javascript (click to enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *