Account Log In - Home/Outlines - Books - Contact Us - Support - Employment -

DHTML

Using JavaScript

Browser Re-direction and Detection

You have probably seen JavaScript browser re-direction and detection scripts in action many times and not even noticed it. Scripts that do such things are quite transparent and quiet about the way they do it. In fact, this is the object of programming re-direction and detection scripts: to do it so effectively that the user is not even aware that anything happened at all.

The Location Object

Before we get into browser redirection, we need to talk about the location object. The location object is a property of the window object, and also a property of the document object. For convenience, we will be referring to it as a window property.

Click to see the value of the location object for this page.

Using location is very simple. You can specify a relative or an absolute URL for the value. This value must be enclosed in quotes to work properly. For example, this script:

window.location = 'http://www.yahoo.com';

specifies that the location of the document will be http://www.yahoo.com.

Using the location object, you can quickly and easily specify or determine the location (URL) of a document.

Re-direction

The Old Way

If you are familiar with HTML and all its workings, then you have probably already seen the HTML tag the accomplishes browser re-direction, the <meta> refresh tag. It typically looks like this:

<meta http-equiv="refresh" content="5;URL=http://www.somewhere-else.com" />

While this way of re-directing a page does work, it is not always quiet about it. Even with the delay setting (the first numerical parameter) set to 0, the user will usually see the present page before the second one loads. Some search engines also frown on this kind of behaviour, because many people abuse the meta refresh tag.

A Better Way

As you might have guessed after seeing the above location object example, you can easily place a one line script into the <head> of the document, and that document will immediately go to the specified URL. In this case, you don't need to place a pair of <noscript></noscript> tags with alternate content for users who don't have JavaScript enabled, because only users without JavaScript will be seeing the page anyway. This way, you are redirecting users with JavaScript, while providing content for users who don't have it.

You can also use this same method to filter out users with older versions of JavaScript by specifying a minimum JavaScript version in the language attribute of the <script> tag. For example:

<head>
<script language="JavaScript1.3" type="text/javascript">
<!--

window.location = "my_javascript_page.html";

//-->
</script>
</head>

<body>
<h1>
   You do not have JavaScript enabled, or you don't have a new enough version of 
   JavaScript to view this site. Please upgrade your browser.
</h1>
</body>

While this way works pretty well, it's still not fool proof. It works much faster than using a <meta> refresh tag, but users may still see a flash of the original page before the new one loads. For a more foolproof method, we can use a link like in this way:

<a href="no_script.html" onclick="window.location='my_javascript_page.html'; return false;">Please click to enter my site</a>

This method works by specifying a non-JavaScript page in the normal href link. If the user has JavaScript disabled, then the browser will ignore the onclick event handler and go normally to the linked page. However, if the user does have JavaScript enabled, then the onclick event handler will take over from the href link, and the user will be taken to the JavaScript enabled page with the window.location='my_javascript_page'; statement. The return false statement ensures that the href link will not be processed.

While putting a call to a function in the onclick handler might seem like a good idea to filter out users with older JavaScript versions, this won't work. If you placed the function with the window.location statement in a script that specifies a minimum JavaScript version, you will get an error in the browser that doesn't have that version. The reason is that you are calling a function that is undefined, as the browser couldn't see it. Also, since the older browser will still understand the return false; statement, the normal link won't be activated, and the user will be stuck where they are. Not a very desirable situation.

Detecting Browsers

There are several methods included in JavaScript for getting information about the browser or user-agent that a person is using. The object that is used to provide all this information is the navigator object. It has several properties and methods that give various different types of information about the user's browser. Here are some of them.

There are a few other properties and methods of the navigator object, but these four are compatible with most browsers. Many of the other navigator properties are not.

You can use the following code to find out some information about your browser(s).

document.write('appName = ' + navigator.appName + '<br />');
     document.write('appVersion = ' + navigator.appVersion + '<br />');
     document.write('userAgent = ' + navigator.userAgent + '<br />');
     document.write('is Java enabled? ' + navigator.javaEnabled());

The navigator object was a Netscape invention ("navigator" is the obvious clue), and as such is a very old and often outdated way of detecting a user's browser. Try the above script. Did you notice the version number returned on some of the lines? It's probably not even close to the real version number of your browser. If you search a little further towards the end of the userAgent result, you might notice that the REAL version number (along with other information, such as the real browser name) are buried inside all this information. It can be difficult to get the proper browser and version number out of all this without advanced JavaScript string handling.

Here is an older example of a browser detection script that would send users to different pages. Note that it is only really useful for detecting older versions of the Netscape browser, or for determining if the browser is IE3 vs IE4. Needless to say, it's not very good for today's browsers. Luckily, we will show you other ways of detecting browsers later on. 


// Initialize some variables.
var user_browser = navigator.appName;
var browser_ver = parseInt(navigator.appVersion);

// IF the word 'Netscape' is found in the string.
if (user_browser.indexOf('Netscape') != -1) {
   
   
   //If the version is less than 4
   if (browser_ver < 4) {
     alert('you are using a really old version of Netscape.');
     alert('You really should upgrade your browser.');
     window.location = 'netscape3.html';
   } 
 
   else 
     // If the browser is less than 5 (but greater than 3)
     if (browser_ver < 5) {
       alert('You are using Netscape version 4.');
       alert('You really should upgrade your browser to take full advantage of DHTML.');
       window.location = 'netscape4.html';
     }
   
   else 
		// If the browser is netscape 6 or greater.
     if (browser_ver >= 5) {
       alert('You are using a newer version of Netscape.'); 
       alert('Most DHTML techniques will work properly on this modern browser.');
       window.location = 'netscape.html';
     }
   }
   
   // If the word 'Explorer' is found in the string.
   if (user_browser.indexOf('Explorer') != -1) {
     if (browser_ver < 4) {
       alert('You are using a very old version of Internet Explorer.');
       alert('You should definitely upgrade your browser.');
       window.location = 'oldie.html';
     }  
	 alert('You are using Internet Explorer.');
   alert('You will be directed to my IE optimized page.');
     window.location = 'ie.html';
   }

The History Object

As a user goes about his/her surfing of the WWW, every browser maintains a list of all the URLs that user has visited. This list is the browser's history. Every major browser has some way to look at this history list. JavaScript also has abilities to access this history list. However, it must be stated that this is a bit of a security risk. Most people probably don't want someone to have the ability to see all the sites that they have visited. Because of this, many of the history object's methods don't work consistently across all browsers, and this is probably a good thing. There is, however one application of the history object we feel safe about showing you.

You have probably seen at one time or another, buttons on a Web site that say "Back". This really tends to mislead and confuse users, because when you click this button, you are really not going back in your history, but going forward another page. To illustrate this somewhat, imaging you were looking at "page a". You then clicked a link to go to "page b", which contained a "back" button. Now, if you were to press your browser's Back button, you would go back to "page a". However, if you clicked the "back" button on the page, you would go forward to "page a". If you attempted to use the browser's Back button now, you would have to go back to "page b", then back one more to "page a". Sound confusing? Imaging how a novice user must feel.

Even though the overwhelming majority of users know what their browser's Back button does, there may be times when you want to give them another option to go back a page. (For instance, if you want to give your users a way to navigate in a chromeless browser window that doesn't have a Back button.) Using the history object, you can give the user an option to go back a page that will work exactly like the browser's Back button, and doesn't add another page to the history list, like the ordinary link did.

We accomplish this by using the history.go() method. This method uses a number to determine which page in the history to access. For example:

This method is simple, and therefore easiest to just put in a simple HTML link. For example:

<a href="javascript:history.go(-1);">Click me to go back</a>

<a href="javascript:history.go(1);">Click me to go forward</a>

You may have noticed that this is a slightly different way to do things. We are not using an event handler at all this time, but simply putting the JavaScript statement directly inside the HTML link. This is ok to do as long as you precede the statement with the word 'javascript', followed by a colon(:). This tells the browser that you are about to say something in JavaScript. You might have already guessed that we can call a function this way as well. This may not be the best way to do this in all instances however, and is best relegated to small, simple statements like the above ones.

Browser Re-direction and Detection Summary

Coming Soon:

Feb 13
ISSD 24 - XML
Feb 14
Web Design Level 4: XHTML Advanced
Feb 21
ISSD 23 - Web 2.0 Technology
Feb 23
Facebook for Business
Hours: 2
Cost: Free!
Feb 25
Search Engine Optimization (SEO)
Hours: 2
Cost: Free!
Feb 25
Search Engine Marketing (SEM)
Hours: 2
Cost: Free!
Feb 27
ISSD 24 - OLDB (Online Databases with MySQL and PHP)
Mar 05
ISSD 23 - Ajax
Mar 20
Web Design Level 5: DHTML Introduction

DHTML - TOC - Introduction - Books -
Using JavaScript - Links - Questions -
[ 1 ] - 2 - 3 - 4 - 5 - 6 -

PrevTop of page. Accesskey=.Next Page
DHTML - TOC - Introduction - Books -
Using JavaScript - Links - Questions -
[ 1 ] - 2 - 3 - 4 - 5 - 6 -