A redirect is essentially a method employed to guide both search engines and users to an alternative URL instead of the original one. The destination page may reside on the same server or on a separate server. Additionally, it can be part of the same website or exist on entirely different websites. For instance, when we click on a URL, we may be taken to another URL. This occurrence is due to page redirection. It is important to note that this process differs from simply refreshing a page.
Typically, search engines do not process JavaScript to detect redirection. Therefore, when it is necessary to inform search engines (for SEO purposes) about URL redirection, it is important to include the rel = "canonical" tag in the head section of the webpage.
<link rel = "canonical" href = "https://logic-practice.com/" />
Multiple techniques exist for executing page redirection, yet the most commonly employed are location.href and location.replace. Implementing page redirection in JavaScript is straightforward.
window.location and window.location.href
The window.location object serves as a property of the window object. Multiple techniques exist for redirecting a web page, and nearly all of these techniques pertain to the window.location object.
It serves the purpose of retrieving the address of the active URL or the web link. The window.location object can be utilized without the necessity of including the window prefix.
location.replace
The window.location object is frequently utilized in web development. Its primary function is to substitute the current document with an entirely new one.
In this approach, we have the ability to provide a new URL, which will trigger an HTTP redirect. This method differs from using href, as it eliminates the current document from the browsing history of the document, preventing the user from returning to the original document.
Syntax
window.location.replace("new URL");
Next, let us explore the concept of page redirection through a few illustrative examples.
Example1
This serves as a straightforward illustration of client-side page redirection. In order to redirect a page, all we need to do is include a statement within the script section.
In this illustration, there exists a button that directs the user to 'logic-practice.com'. It is necessary to click the button in order to navigate to the correct URL.
<html>
<head>
<script type = "text/javascript">
function page_redirect(){
window.location = "https://logic-practice.com/";
}
</script>
</head>
<body>
<h2> This is an example of the page redirection </h2>
<p> Click the following button to see the effect. </p>
<form>
<input type = "button" value = "Redirect" onclick = "page_redirect()" />
</form>
</body>
</html>
Output
Upon executing the code provided above, the resulting output will be -
Upon clicking the specified button, the resulting output will be -
Example2
In this illustration, we utilize the setTimeout function that facilitates an automatic redirection of the user to the designated link. There will be a brief delay before the new page loads. The setTimeout function executes a specified function after a defined time period.
<html>
<head>
<script type = "text/javascript">
function page_redirect() {
window.location = "https://logic-practice.com/";
}
setTimeout('page_redirect()', 5000);
</script>
</head>
<body>
<h2> After 5 seconds, you will redirected to another page. </h2>
<p> Wait for 5 seconds to see the effect. </p>
</body>
</html>
Output
Upon executing the code provided above, the resulting output will be -
Following a duration of five seconds, the resulting output will be -
Example3
In this instance, we are utilizing the replace function to achieve page redirection. The replace function will substitute the existing document with the new one.
In this instance, an HTML button is provided that can be clicked to substitute the current document with a new version.
<!DOCTYPE html>
<html>
<head>
<script>
function page_redirect() {
location.replace("https://logic-practice.com")
}
</script>
</head>
<body>
<h2> Example of redirecting a page using replace() </h2>
<p> Using the replace() the currct document will replace with new one. </p>
<p> Click the following button to see the effect. </p>
<button onclick = "page_redirect()"> Replace </button>
</body>
</html>
Output
Upon running the code provided above, the resulting output will be -
Upon selecting the specified button, the resulting output will be -
Should we attempt to access the prior document once more using the identical location, we will observe that it gets substituted with the newly created document.