How to redirect to another web page using JavaScript

JavaScript offers many ways to redirect the user to a different web page, if during the execution of your program you need to move to a different page.

The one that can be considered canonical to navigate to a new URL is

window.location = 'https://newurl.com'

If you want to redirect to a different path, on the same domain, use:

window.location.pathname = '/new'

This is the Location interface on window.location. Unlike the History API’s pushState, this navigates to a new page.

Other options to redirect

As with most things in programming, there are many ways to perform the same operation.

Since window is implicit in the browser, you can also do:

location = 'https://newurl.com'

Another way is to set the href property of location:

window.location.href = 'https://newurl.com'

location also has an assign() method that accepts a URL, and performs the same thing:

window.location.assign('https://newurl.com')

The replace() method is different than the previous ways because it rewrites the current page in the history. The current page is wiped, so when you click the “back” button, you go back to the page that now is the last visited one.

window.location.replace('https://newurl.com')

This can be convenient in some situations.

Different ways to reach the window object

The browser exposes the self and top objects, which all reference the window object, so you can use them instead of window in all the examples above:

self.location = 'https://newurl.com'

top.location = 'https://newurl.com'

301 redirect using a server-side directive

The above examples all consider the case of a programmatic decision to move away to a different page.

If you need to redirect because the current URL is old, and move the a new URL, it’s best to use server-level directive and set the 301 HTTP code to signal search engines that the current URL has permanently moved to the new resource.

This can be done via .htaccess if using Apache. Netlify does this through a _redirects file. See the HTTP status codes post for 301 and 308.

Are 301 redirects possible using JavaScript?

No. The 301 HTTP response must come from the server, before the browser runs any JavaScript.

Google’s current guidance in Redirects and Google Search is: use a server-side 301 or 308 when you can. An instant (0-second) meta refresh is treated as a permanent redirect. Use a JavaScript redirect only if you can’t do a server-side or meta refresh redirect.

Use an HTML meta tag

Another option is using a meta tag in your HTML:

<html>
  <head>
    <meta http-equiv="refresh" content="0;URL=https://newurl.com/">
  </head>
</html>

This is an instant meta refresh. Google treats it as a permanent redirect. A delayed meta refresh (more than 0 seconds) is treated as a temporary redirect. A server-side 301 or 308 is still the best option.

Want me to talk about your product? You can sponsor this site.