How to redirect to another page in JavaScript?
Hello Buddies!
This article goes into detail on How to redirect to another page in JavaScript. I’m going to show you how we redirect our web page using JavaScript. In this article, we will see how we can redirect a website page to another page in JavaScript.
There are many ways to redirect the users to a different page if during the running of your function you need to redirect the user to another page. Let's see how can we use this in JavaScript.
First, one that can be considered canonical to redirect to a new URL is
window.location = 'https://your-new-url.com';If you want to redirect to a different path but on the same domain then we can use this
window.location.pathname = '/new-path';Other options to redirect in JavaScript
There are many ways to perform the same function in JavaScript
Since window is implied in the browser, you can also do it this way.
location = 'https://your-new-url.com';OR
window.location = 'https://you-new-url.com';Above two different methods return the same output.
Another way is to set the href property of location:
window.location.href = 'https://your-new-url.com';Location also has a assign() the function that accepts the URL and performs the same action
window.location.assign('https://you-new-url.com');The replace() the function is different than the previous ways because it rewrites the current web page in history. The current web page is clean, so when you go back to the previous page that now is the last visited one.
window.location.replace('https://your-new-url.com');This can be helpful in some conditions.
Different ways to get the window object
The browser reveals the self and top objects, which all reference the window object, so you can use them instead of window in all the previous examples.
self.location = 'https://your-new-url.com';
top.location = 'https://your-new-url.com';Are 301 redirects possible using JavaScript?
Sadly not.
That's not possible to do it in JavaScript because JavaScript works on the client-side while redirection with 301 is a server-side working. The 301 HTTP response code must be sent from the server, well before the JavaScript is performed by the browser.
Observations say that JavaScript redirects are explicated by the search engines like 301 redirects. See
Using JavaScript to redirect users can be a legitimate practice. For example, if you redirect users to an internal page once they’re logged in, you can use JavaScript to do so. When examining JavaScript or other redirect methods to ensure your site adheres to our guidelines, consider the intent. Keep in mind that 301 redirects are best when moving your site, but you could use a JavaScript redirect for this purpose if you don’t have access to your website’s server.
301 redirect using a server-side directive
The previous examples all consider the case of the programmatic decision to redirect to another page. If you need to redirect because the current URL is old, and redirect to the new URL, it's the best way to use server-side directive and set the 301 HTTP code to inform search engines that the current URL has been permanently changed to the new URL.
This can be done via .htaccess if using the Apache server.
Use an HTML meta tag
It's another way is using a meta tag in your HTML
<html>
<head>
<meta http-equiv="refresh" content="0;URL=https://newurl.com/">
</head>
</html>This will cause the browser to load the new page once it has loaded and explicate the current one and not inform the search engines of anything. The best option is always to use a server-side 301 redirect.
If you found this article helpful please share it.
Happy Coding :)
