In this tutorial, we will be able to show you how to use JavaScript for different scenarios. Before we move on to our examples though, let's briefly mention the importance of using these adverts responsibly and only when you really have to.

Interruptive or unexpected web page redirects are considered to be very important to the user perspective, since they are negatively affecting the overall user experience. For example, if you're going to be on your website, that will obviously cause frustration for them. Also, if you take a look at the page after a timer, or if they take a look at your site, or if they want to leave you at your site and never come back.

Another reason you should avoid it is that the search engines do not use websites, especially if they are deceptive. Your site may be deleted from your homepage if you have a problem with your search engine. Having said that, there are also some places where you can not find the right to use your website or a specific feature of your web application.

Keeping the above points in mind, we can now continue with

JavaScript Redirect Methods

You can redirect to a web page via JavaScript using a number of methods. We will quickly list them with the recommended one.

In JavaScript, window.location or simply location object is used to get information about the location of the current web page (document) and also to modify it. The following is a list of possible ways that can be used as a JavaScript redirect :


<!DOCTYPE html>
<html>
<head>
<title>Redirect url in Javascript</title>
</head>
<body>
<script>
var url= "http://www.example.com";
window.location = url;
</script>
</body>
</html>

// Sets the new location of the current window.
window.location = "https://www.example.com";

// Sets the new href (URL) for the current window.
window.location.href = "https://www.example.com";

// Assigns a new URL to the current window.
window.location.assign("https://www.example.com");

// Replaces the location of the current window with the new one.
window.location.replace("https://www.example.com");

// Sets the location of the current window itself.
self.location = "https://www.example.com";

// Sets the location of the topmost window of the current window.
top.location = "https://www.example.com";

JS code makes it easier for them to understand the difference. For example, if you use top.location redirect within an iframe, it will force the main window to be redirected. Another point to keep in mind is that location.replace () replaces the current document by moving it from the history, thus making it unavailable via the Back button of the browser.

It is better to know your alternatives if you want to cross-browser compliant JavaScript redirect script


window.location.href = "https://www.example.com";

Simply insert your target URL that you want to redirect to in the above code. You can also check this page to read more about how window.location works. Now, let's continue with our examples.

JavaScript Redirect: Redirect Page On Page Load
In this article, you can use the following code for your page, within the <head> element. Now, if you are using a separate .js file, put the following code in your file.


<script>
window.location.href = "https://www.example.com";
</script>

Simply replace the example URL with the one you want to redirect to. Note that, with this type of redirection, the visitors will not see your web page and will be redirected to the URL.

JavaScript Redirect: Redirect the Page After a Certain Period
In the future, you can use the following code:


<script>
setTimeout(function() {
window.location.href = "https://www.example.com";
}, 3000);
</script>

The above function will be redirect the page 3 seconds after it fully loads. You can change 3000 (3 x 1000 in milliseconds) as you wish.

JavaScript Redirect: The Page After an Event or User Action
Sometimes, you may want to send a message to a certain page, a layout change, a form submission, a file upload, a drag image, a countdown timer expiration or things like that. In such cases, you can use a condition check or assign an event to an element for performing the redirect. You can use the following two examples to give a basic idea:


<script>
// Check if the condition is true and then redirect.
if ( ... ) {
window.location.href = "https://www.example.com";
}
</script>

The above code will be redirected if the condition is true.


<script>
// onclick event is assigned to the #button element.
document.getElementById("button").onclick = function() {
window.location.href = "https://www.example.com";
};
</script>

The above code will be redirected when the user clicks the #button element.

This is how JavaScript is redirect basically works. We hope that you will be able to help you while handling your web page redirects.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

two × 5 =