How to Redirect to Another Web Page Using JavaScript
In JavaScript, there are multiple ways to redirect the user to a different web page. In this blog, we will explore the canonical way to achieve this and discuss other options available using plain JavaScript.
Canonical Way to Redirect
The most widely used method to navigate to a new URL is by setting the window.location property to the desired URL:
1 | window.location = 'https://newurl.com'; |
If you want to redirect to a different path on the same domain, you can use the window.location.pathname property:
1 | window.location.pathname = '/new'; |
This method utilizes the location object provided by the History API.
Other Options to Redirect
Apart from the canonical method mentioned above, there are several alternative ways to achieve the same result. Since window is implicit in the browser, you can omit it while setting the location property:
1 | location = 'https://newurl.com'; |
Another approach is to set the href property of the location object:
1 | window.location.href = 'https://newurl.com'; |
The location object also provides an assign() method that performs the same redirect:
1 | window.location.assign('https://newurl.com'); |
Additionally, the replace() method can be used to rewrite the current page in the history, which wipes out the current page and makes the new page the last visited one:
1 | window.location.replace('https://newurl.com'); |
This method can be useful in certain situations.
Different Ways to Reach the window Object
The browser exposes the self and top objects, both of which reference the window object. Therefore, you can use them instead of window in the examples provided above:
1 | self.location = 'https://newurl.com'; |
301 Redirect Using a Server-Side Directive
The above examples cover programmatically redirecting to a different page. However, if you need to redirect due to an outdated URL and permanently move to a new URL, it is recommended to use a server-level directive with a 301 HTTP code. This informs search engines that the current URL has permanently moved to the new resource.
To achieve this, you can use an .htaccess file if you are using Apache or a _redirects file in the case of Netlify.
Is it Possible to Use JavaScript for 301 Redirects?
No, it is not possible to perform a 301 redirect using JavaScript on the client-side. The 301 HTTP response code must be sent from the server before JavaScript is executed by the browser. However, experiments have shown that JavaScript redirects are interpreted by search engines similarly to 301 redirects. Refer to this Search Engine Land post for more details.
According to Google:
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.
Use an HTML Meta Tag
An alternative option for redirection is to use an HTML meta tag in your webpage:
1 | <html> |
This meta tag causes the browser to load the new page once it has loaded and interpreted the current page. It does not signal anything to search engines. However, it is worth noting that the best practice is to utilize a 301 server-level redirect whenever possible.
tags: [“JavaScript”, “Redirect”, “Web Development”, “Frontend Development”]