Hello readers! welcome back to another section of my tutorial on JavaScript. In my previous tutorial guide we discussed about the JavaScript Cookies.
In this tutorial guide we will be discussing about JavaScript Page Redirection.
In this tutorial guide we will be discussing about JavaScript Page Redirection.
What is Page Redirection?
You might have encountered a situation where you clicked a URL to reach a page X but internally you where redirected to another page Y. This happens due to page redirection. This concept is quite different from the JavaScript Page Refresh.
There could be various reasons why you would like to redirect a user from the original page. We are listing down a few of the reasons-
There could be various reasons why you would like to redirect a user from the original page. We are listing down a few of the reasons-
- You did not like the name of your domain and you are moving to a new one. In such a scenario, you may want to direct all your visitors to the new site. Here you can maintain your old domain but put a single page with a page redirection such that all your old domain visitors can come to your new domain.
- You have built-up various pages based on browser versions or their names or may be based on different countries, then instead of using your sever-side page redirection, you can use client-side page redirection to land your users on the appropriate page.
- The Search Engines may have already indexed your pages. But while moving to another domain, you would not like to lose your visitors coming through search engines. So you can use client-side page redirection. But keep in mind this should not be done to fool the search engine,it could lead your site to get banned.
How Page Redirection Works?
The following examples below explains or demonstrates how to implement page Redirections.
Example 1
It is quite simple to do a page redirect using JavaScript at client side. To redirect your site visitors to a new page, you just need to add a line in your head section as follows.
<html>
<head>
<script type = "text/Javascript">
<!--
function Redirect() {
window.location = "https://webdesigntutorialz.com";
}
//-->
</script>
</head>
<body>
<p>Click the following button, you will be redirected to home page.</p>
<form>
<input type = "button" value = "Redirect" onclick = "Redirect();" />
</form>
</body>
</html>
<head>
<script type = "text/Javascript">
<!--
function Redirect() {
window.location = "https://webdesigntutorialz.com";
}
//-->
</script>
</head>
<body>
<p>Click the following button, you will be redirected to home page.</p>
<form>
<input type = "button" value = "Redirect" onclick = "Redirect();" />
</form>
</body>
</html>
Output
Below is the output of the above example.
Click the following button, you will be redirected to home page.
Example 2
You can show a proper message to your website visitors before redirecting them to a new page. This would need a bit time delay to load a new page. The following example shows how to implement the same. Here setTimeout() is a built-in JavaScript function which can be used to execute another function after a given time interval.
<htm>
<head>
<script type = "text/JavaScript">
<!--
function Redirect() {
window.location = "https://webdesigntutorailz.com";
}
document.write("You will be redirected to main page in 10 sec.");
setTimeout('Redirect()' , 10000);
//-->
</script>
</head>
<body>
</body>
</html>
<head>
<script type = "text/JavaScript">
<!--
function Redirect() {
window.location = "https://webdesigntutorailz.com";
}
document.write("You will be redirected to main page in 10 sec.");
setTimeout('Redirect()' , 10000);
//-->
</script>
</head>
<body>
</body>
</html>
Output
You will be redirected to main page in 10 sec.
Example 3
The following example shows how to redirect your site visitors onto a different webpage based on their browsers.
<html>
<head>
<script type = "text/Javascript">
<!--
var browsername = navigator . appName;
if ( browsername == "Netscape" ) {
window.location = "https://webdesigntutorailz.com";
} else if ( browser == "Microsoft Internet Explorer" ) {
window.location = "https://google.com";
} else {
window.location = "https://ebay.com";
}
//-->
</script>
</head>
<body>
</body>
</html>
<head>
<script type = "text/Javascript">
<!--
var browsername = navigator . appName;
if ( browsername == "Netscape" ) {
window.location = "https://webdesigntutorailz.com";
} else if ( browser == "Microsoft Internet Explorer" ) {
window.location = "https://google.com";
} else {
window.location = "https://ebay.com";
}
//-->
</script>
</head>
<body>
</body>
</html>
Alright guys! This is where we are rounding up for this tutorial post. In my next tutorial, we are going to be studying about the Javascript Dialogue Boxes.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.