JavaScript redirect

Redirect is nothing but a mechanism of sending search engines and users on a different URL from the original one. The redirected page can be on the same server or on a different server. It can also be on the same website or on different websites. Sometimes when we clicked on a URL, we directed to another URL. It happens because of the page redirection. It is different from refreshing a page.

Generally, search engines do not analyze the JavaScript to check the redirection. So, if it is required to notify the search engines (SEO) about the URL forwarding, we need to add the rel = "canonical" tag within the head section of the web page.

There are several methods used for performing page redirection, but location.href and location.replace() are widely used. The page redirection is easy in JavaScript.

window.location and window.location.href

window.location object is a property of the window object. There are several methods to redirect a web page. Almost all methods are related to the window.location object.

It can be used for getting the address of the current URL or the web address. The window.location object can be written without adding the window prefix.

location.replace()

It is one of the commonly used window.location object. It is used for replacing the original document with a new one.

In this method, we can pass a new URL, and then it will perform an HTTP redirect. It is different from href as it removes the current document from the document's history, so it is not possible to navigate back to the original document.

Syntax

Now, let's understand the page redirection by using some examples.

Example1

It is a simple example of page redirection on the client-side. To redirect a page, we simply have to write a statement in the script section.

In this example, there is a button which redirect's the visitor to 'tutorialsinfo.com'. We have to click the button to naviagate on the appropriate link.

Output

After the execution of the above code, the output will be -

After clicking the given button, the output will be -

Example2

In this example, we are using the setTimeout() method which automatically redirect the user to the appropriate link. It would take some time to load a new page. The setTimeout() method executes another function after a given time interval.

Output

After the execution of the above code, the output will be -

After the interval of five seconds, the output will be -

Example3

In this example, we are using the replace() method for page redirection. The replace() method will replace the current document with the new document.

Here, there is an HTML button that is to be clicked to replace the document with the new one.

Output

After the execution of the above code, the output will be -

After clicking the given button, the output will be -

If we try to open the previous document again with the same location, we can see that it will be replaced with the new document.