How to redirect to another webpage using JavaScript

JavaScript provides many ways to redirect users to other web pages. Learn the canonical method and use plain JavaScript to find out all available options

JavaScript provides many ways to redirect users to other pages, if you need to move to other pages during the execution of the program.

It can be considered that the specification for navigating to a new URL is

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

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

window.location.pathname = '/new'

This is usinglocationProvided byHistory API.

Other redirection options

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

sincewindowImplicit in the browser, you can also do the following:

location = 'https://newurl.com'

Another way is to sethrefthe property oflocation:

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

locationThere is also oneassign()The way to accept the URL and perform the same operation:

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

Thisreplace()The method is different from the previous method because it will rewrite the current page in the history. The current page has been erased, so when you click the "back" button, you will return to that page.right nowIt was the last time I visited.

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

In some cases this may be convenient.

Different ways to reachwindowpurpose

Browser displayselfwithtopObjects, these objects are all referencedwindowObjects, so you can use them instead ofwindowIn all the above examples:

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

top.location = https://newurl.com

301 Redirect using server-side commands

The above examples all consider the case of transferring to other pages through program decisions.

If you need to redirect because the current URL is old, and then move the new URL, it is best to use server-level instructions and set the 301 HTTP code to signal the search engine that the current URL has been permanently moved to the new resource.

This can be done by.htaccessIf you use Apache.NetlifyDo this through one_redirectsfile.

Is it possible to perform a 301 redirect using JavaScript?

Unfortunately not.

This is not possible on the client side.

The 301 HTTP response code must be sent from the server before JavaScript can be executed by the browser.

Experiments show that JavaScript redirects are explained by search engines, such as 301 redirects. LookThis search engine land releasefor reference.

Google says:

It may be legal to use JavaScript to redirect users. For example, if you redirect the user to an internal page after logging in, you can use JavaScript to do so. When checking JavaScript or other redirect methods to ensure that your site complies with our guidelines, please consider its intent. Remember, when moving a website, it's best to use a 301 redirect, but if you don't have access to the website's server, you can use JavaScript redirection.

Use HTML meta tags

Another option is to use meta tags in HTML:

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

Once the current page is loaded and interpreted, this will cause the browser to load the new page without sending any signal to the search engine. The best option is always to use 301 server-level redirects.

Download mine for freeJavaScript beginner's manual


More js tutorials: