PageResource.com - Web Development Tutorials

JavaScript Redirection

Redirecting your viewer's browser

Note: Be careful using this if the page you use it on is listed in a search engine. Many of them find redirection to be a way of attempting to spam their index, and may remove the site from the listings. If you are unsure, don't try this-- or contact the search engine for their rules.

Redirection is often used to take viewers to a page depending on their browser's name or version. To redirect a viewer instantly, you just need to add a short command in your head section:

<HEAD>
<SCRIPT language="JavaScript">
<!--
window.location="http://someplace.com";
//-->
</SCRIPT>
</HEAD>

This would take the viewer right to the url you used as soon as they start loading the page. Sometimes this is done if a site has moved to another location. Another use for it is to detect a browser type and redirect your viewers to one page for Netscape, another of Internet Explorer, or a third for other browsers:

<HEAD>
<SCRIPT language="JavaScript">
<!--
var browserName=navigator.appName; 
if (browserName=="Netscape")
{ 
window.location="http://www.someplace.com/ns.html";
}
else 
{ 
 if (browserName=="Microsoft Internet Explorer")
 {
  window.location="http://www.someplace.com/ie.html";
 }
 else
  {
   window.location="http://www.someplace.com/other.html";
   }
}
//-->
</SCRIPT>
</HEAD>

This uses the browser detection method from the previous section. Rather than popping up an alert box, we redirect the viewer to a page that best suits the browser being used.

If you want to have one page for version 4 browsers and another for others, we can take another script from the previous section and change it in the same way:

<HEAD>
<SCRIPT language="JavaScript">
<!--
var browserVer=parseInt(navigator.appVersion); 
if (browserVer >= 4)
{
 window.location="http://www.someplace.com/v4.html";
}
else
{
window.location="http://www.someplace.com/other.html";
}
//-->
</SCRIPT>
</HEAD>

Not too bad, the only trouble is the need to create so many pages!

You can also use this to help people who come into your site, but come in on a page that should be within a frameset that you use for navigation. Using the top.frames.length object, you can find out if the page is in a frame or not. If the value is zero, the page is not in a frame. If it is greater than zero, the page is inside a frame. So, you could take the viewer back to your main frameset page using a script like this:

<HEAD>
<SCRIPT language="JavaScript"> 
<!--
 function getgoing()
  {
    top.location="http://someplace.com";
   }
 
   if (top.frames.length==0)
    {
     alert("You will be redirected to our main page in 10 seconds!");
     setTimeout('getgoing()',10000);
     }
//--> 
</SCRIPT> 
</HEAD>

This will alert the viewer and take them to the main page after 10 seconds. You can change the number in the setTimeout function to adjust the time if you like.

You can also use it to break a viewer out of someone else's frames if they followed a link that didn't have the target set correctly. It uses the same idea in reverse:

<HEAD>
<SCRIPT language="JavaScript"> 
<!--
 function getgoing()
  {
    top.location="http://someplace.com";
   }
 
   if (top.frames.length > 0)
    {
     alert("The frames will be broken in ten seconds.");
     setTimeout('getgoing()',10000);
     }
//--> 
</SCRIPT> 
</HEAD>

As you can see, redirection can be a handy tool at times. Just use it with caution if you are worried about the search engines.

Well, that does it for now. Let's go check out the next section, New Windows with JavaScript.

previous
Previous
By: John Pollock next
Next

Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy