A redirect in JavaScript is a technique that directs search engines and people to a different URL than the original. The rerouted page may be located on the same or a different server. It might also take place on the same or separate websites. We are occasionally redirected to another URL when we click on a URL. It occurs as a result of the page redirection. It's not the same as refreshing a webpage.
In most cases, search engines do not examine the JavaScript to see if the redirection is correct. So, if we need to tell search engines (SEO) about URL forwarding, we must include the rel = "canonical" element in the web page's head section.
There are numerous redirect in JavaScript techniques for accomplishing page redirection, but the most popular are location.href and location.replace(). In JavaScript, page redirection is simple.
The window object's location object is a property. A web page can be redirected in a number of ways. The window.location object is used by almost all functions.
It may be used to obtain the current URL or web address's address. Without the window prefix, the window.location object can be written.
One of the most often used is window.location objects. It's used to create a new document from an existing one. We may give a new URL to this method, and it will initiate an HTTP redirect in JavaScript. It differs from href in that it deletes the current document from the document's history, making it impossible to return to the original.
Syntax
window.location.replace("new URL")
Example
<html>
<head>
<script type = "text/javascript">
function page_redirect(){
window.location = "https://www.rankwithme.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
What Is the Use of Redirect in JavaScript?
If you switch to a new domain for any reason, you can send people to the new site when they visit an older domain's content.
You have numerous pages with different content depending on the user's location, language, browser, or other criteria, and you redirect them to the most appropriate page.
Requests for resources from unauthenticated or unauthorized users are sent to a login page.
You direct people to additional sites that are connected to the present site's content.
How Does Redirection Work?
You may have experienced a situation where you clicked a URL to go to website X but were instead sent to page Y. It occurs as a result of page redirection. You may want to divert a visitor away from the original page for a variety of reasons. We've compiled a list of such reasons..
You've decided to change the name of your domain since you don't like it. You may wish to send all of your visitors to the new site in this case. You can keep your previous domain but create a single page with a page redirection so that all visits to your old domain go to your new domain.
If you've created several pages based on browser versions, names, or even different countries, you may utilize client-side page redirection instead of server-side page redirection to route your customers to the proper page.
It's possible that the search engines have already indexed your pages. However, you don't want to lose visitors who came through search engines while switching to a new domain. As a result, client-side page redirection is an option. However, bear in mind that this should not be done to deceive the search engine; otherwise, your site may be blacklisted.
Example:
<html>
<head>
<script type = "text/javascript">
<!--
function Redirect() {
window.location = "https://www.abc.com";
}
//-->
</script>
</head>
<body>
<p>Click the following button, you will be redirected to home page.</p>
<form>
<input type = "button" value = "Redirect Me" onclick = "Redirect();" />
</form>
</body>
</html>
Output
Redirect the Page on Page Load With Redirect in JavaScript
You may use the following code at the top of your page, within the head> element, to redirect the visitor to another website soon after your website is launched. Alternatively, if you're using a separate.js file, add the following code to that file and link to it from the page's head. Simply substitute the URL you wish to redirect to for the sample URL. Visitors will not see your web page and will be routed to the target URL immediately with this sort of redirection as you redirect in JavaScript.
<script>
window.location.href = "https://www.example.com";
</script>
Redirect the Page After an Event With Redirect in JavaScript
In such instances, you may conduct the redirect using a condition check or by assigning an event to an element. Consider the following example:
<script>
// Check if the condition is true and then redirect.
if ( ... ) {
window.location.href = "https://www.example.com";
}
</script>
Advance your career as a MEAN stack developer with the Full Stack Web Developer - MEAN Stack Master's Program. Enroll now!
Conclusion
Interruptive or unexpected web page redirection are regarded as extremely irritating by users since they detract from the overall user experience. For example, redirecting customers to another website as soon as they arrive on your site would inevitably cause them irritation. Furthermore, if you redirect people to an unrelated page after a timer, after they click on a button or picture, or after they perform a certain action on your site, the user will most likely want to leave right away and never return.
If you want to know more about how to redirect in JavaScript, you must enroll in the Simplilearn’s Full Stack Web Development course and enjoy redirecting your pages. Also if you want to enhance your expertise, you can explore Simplilearn’s skill up program where courses offered focus on building strong foundational skills for career growth.