JavaScript is a powerful scripting language that can be used to perform a wide range of tasks on the client side, including redirecting users to a new page. In this article, we will take a look at how to use JavaScript to redirect users to a new page in two different ways: immediately when the page loads, and after a time delay.
JavaScript Immediate Redirect:
The most basic way to redirect a user to a new page using JavaScript is to set the window.location property to the URL of the new page. The window.location property is a property of the window object, which represents the current browser window or tab. This property can be used to get the current page address (URL) or to redirect the browser to a new page.
Here’s an example of how to use JavaScript to redirect a user to a new page immediately when the page loads:
<head>
<script type="text/javascript">
<!--
window.location="http://www.newlocation.com";
//-->
</script>
</head>In this example, the JavaScript code is placed in the head section of the HTML document. When the page loads, the JavaScript code is executed, setting the window.location property to the URL of the new page. This causes the browser to navigate to that page.
JavaScript Time Delay Redirect :
Another way to redirect a user to a new page using JavaScript is to use the setTimeout() function to delay the execution of a function that sets the window.location property. The setTimeout() function is a built-in JavaScript function that can be used to delay the execution of a function for a specified amount of time.
Here’s an example of how to use JavaScript to redirect a user to a new page after a time delay:
<html>
<head>
<script type="text/javascript">
<!--
function delayer(){
window.location = "../javascriptredirect.php"
}
//-->
</script>
</head>
<body onLoad="setTimeout('delayer()', 5000)">
<h2>Prepare to be redirected!</h2>
<p>This page is a time delay redirect, please update your bookmarks to our new
location!</p>
</body>
</html>setTimeout():
The most important part of getting the delay to work is being sure to use the JavaScript function setTimeout. We want the delayer() function to be used after 5 seconds or 5000 milliseconds (5 seconds), so we pass the setTimeout() two arguments.
- ‘delayer()’ – The function we want setTimeout() to execute after the specified delay.
- 5000 – the number of millisecods we want setTimeout() to wait before executing our function. 1000 miliseconds = 1 second.
In this example, the JavaScript code is placed in the head section of the HTML document. The delayer() function is defined to set the window.location property to the URL of the new page. The onLoad event of the body element is used to call the setTimeout() function, which causes the delayer() function to be executed after a 5 seconds delay. This allows you to display an appropriate message to your site visitors before redirecting them to a new page.
It’s important to note that the window.location property can be used in place of the href property of the <a> tag to create links that redirect to a new page. However, using JavaScript to redirect users to a new page has the advantage of being able to redirect users even if they have JavaScript disabled in their browser.
Conclusion:
In conclusion, JavaScript provides two ways to redirect users to a new page: immediately when the page loads, and after a time delay. By setting the window.location property to the URL of the new page, the browser will navigate to that page. The setTimeout() function can be used to delay the execution of a function that sets the window.location property, allowing you to display an appropriate message to your site visitors before redirecting them to a new page.
