What is Page Redirection?
You might have
encountered a situation where you clicked a URL to reach a page X but
internally you were directed to another page Y. It happens due to page redirection. This concept is different from 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:
·
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
server-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.
JavaScript Page Refresh
You can refresh a web
page using JavaScript location.reload
method. This code can be called automatically upon an event or simply when the
user clicks on a link. If you want to refresh a web page using a mouse click,
then you can use the following code:
<a
href="javascript:location.reload(true)">Refresh Page</a>
Auto Refresh
You can also use
JavaScript to refresh the page automatically after a given time period. Here setTimeout() is a built-in JavaScript
function which can be used to execute another function after a given time
interval.
Example
Try the following example. It shows how to
refresh a page after every 5 seconds. You can change this time as per your
requirement.
<html>
<head>
<script
type="text/JavaScript">
<!--
function AutoRefresh( t
) { setTimeout("location.reload(true);", t);
}
//
-->
</script> </head>
<body
onload="JavaScript:AutoRefresh(5000);"> <p>This page will
refresh every 5 seconds.</p> </body>
</html>
Output
This page will refresh every 5 seconds.
How Page Re-direction
Works?
The implementations of Page-Redirection are as follows.
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="http://www.tutorialspoint.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
Click the following button, you will be
redirected to home page.
Redirect Me
Example 2
You can show an
appropriate message to your site 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.
<html>
<head>
<script
type="text/javascript">
<!--
function Redirect() {
window.location="http://www.tutorialspoint.com";
}
document.write ("You will be
redirected to our main page in 10 seconds!");
setTimeout('Redirect()', 10000);
//-->
</script>
</head>
<body>
</body>
</html>
Output
You will be redirected to tutorialspoint.com
main page in 10 seconds!
Example 3
The following example shows how to redirect
your site visitors onto a different page based on their browsers.
<html>
<head>
<script
type="text/javascript">
<!--
var browsername=navigator.appName;
if( browsername == "Netscape" )
{
window.location="http://www.location.com/ns.htm";
}
else if ( browsername =="Microsoft Internet
Explorer")
{
window.location="http://www.location.com/ie.htm";
}
else
{
window.location="http://www.location.com/other.htm";
}
//-->
</script>
</head>
<body>
</body>
</html>
0 comments:
Post a Comment