There are several ways to redirect a web page: client side using the meta tag in HTML, and server side using HTTP redirect methods to name a few. In this article, we look at how to redirect a web page using JavaScript.
Two Methods
There are two possible ways to use JavaScript code for page redirection. Both involve the window location object.
href
The first way involves the href property on the location object (which, in turn, is part of the window object). The only thing you have to do is handle the redirect by assigning the URL you would like for the redirect to go to as the location.href. You do this in a JavaScript function that will execute when the page loads:
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
p {
margin: 0;
padding: 0;
}
</style>
</head>
<body onload=handleRedirect("https://www.careerkarma.com/blog/html")>
You are being redirect to <a rel="noreferrer noopener" href="https://careerkarma.com/blog/html">http://www.careerkarma.com/blog/html.</a> Please click this link if not redirected in five seconds
</body>
<script>
const handleRedirect = (url) => {
location.href = url;
}
</script>
</html>I’ve added a script tag to the bottom of the document, right before the body tag. This is where our JavaScript goes. A function, called handleRedirect, has a parameter called url. We assign location.href to the value of that url.
At the top of the body of the document, we have an onload event. This onload event executes the JavaScript function we assign to it. Here, we have passed in the URL we would like for it to go to. The redirect happens immediately and goes to the HTML portion of Career Karma’s blog posts.
If you would like to add a little bit of a pause before the page redirects, you can do that using the setTimeout function. Here’s how to do it:
const handleRedirect = (url) => {
setTimeout(() => {
location.href = url;
}, 2000);
}Everything else remains the same.
This method adds the originating page to the history stack. It is accessible by the browser’s back button. There is another method to replace the URL if you prefer to do that instead – we look at that one next!
replace
Unlike the method we’ve created above that assigns a new URL to a property on the location object, location.replace() is a method that assigns and replaces the original URL with the one you specify.
This method does not place the original URL on the browser’s stack, it replaces the destination with the redirected URL. Here’s how to do it:
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
p {
margin: 0;
padding: 0;
}
</style>
</head>
<body onload=location.replace("https://www.careerkarma.com/blog/html")>
You are being redirect to <a rel="noreferrer noopener" href="https://careerkarma.com/blog/html">http://www.careerkarma.com/blog/html.</a> Please click this link if not redirected in five seconds
</body>
</html>As you can see, we don’t need the script tag at all for this one-liner. When the document loads, it runs the location.replace method, which directs us to the site in parentheses.
That’s it! You can now redirect to a new web page using JavaScript.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
