Browser detection allows you to find out what browser your viewer is using, and then perform a script based on it– or just to send a friendly message to those with your favorite browser.
You might come around a situation when you need to include different Javascript files for different browsers, or call different function. This script will hep you doing that.
There are two objects often used for this, the navigator.appName and navigator.appVersion objects. The first one returns the name of the browser, the second returns the version of the browser.
If the browser is Netscape, navigator.appName returns the string “Netscape”. If it is Internet Explorer, it returns the string “Microsoft Internet Explorer”. Using just this, you could make a script to alert people as to what browser they are using (just to bug them). Like this:
<HEAD>
<SCRIPT language="JavaScript">
<!--
var browserName=navigator.appName;
if (browserName=="Netscape") {
alert("Hi Netscape User!");
} else {
if (browserName=="Microsoft Internet Explorer") {
alert("Hi, Explorer User!");
} else {
alert("What ARE you browsing with here?");
}
} //--> </SCRIPT>
</HEAD>
You can do the same thing with the navigator.appVersion, except you will most likely want to grab just the integer from the version information (2,3,4, etc.). To do this, we use the parseInt() function:
var browserVer=parseInt(navigator.appVersion);
Now, it returns only the integer value and not something like version 4.51. It just sends back 4 in that case. Thus, we could alert viewers as to whether their browser is new enough for us or not:
<HEAD>
<SCRIPT language="JavaScript">
<!--
var browserVer=parseInt(navigator.appVersion);
if (browserVer >= 4) {
alert("Your browser is new enough for my site.");
} else {
alert("I think you need a new browser!");
} //-->
</SCRIPT>
</HEAD>
Of course, you can use both objects to be more exact. You could look for a certain set of browsers and only if they are above a certain version:
<HEAD>
<SCRIPT language="JavaScript">
<!--
var browserName=navigator.appName;
var browserVer=parseInt(navigator.appVersion);
if ((browserName=="Netscape" && browserVer>=3) ||
(browserName=="Microsoft Internet Explorer" && browserVer>=4))
version="n3";
else
version="n2";
if (version=="n3")
alert("Your browser passes the test");
else
alert("You need an upgrade, I think.");
//-->
</SCRIPT> </HEAD>
It is basically saying that “if the browser name is Netscape and it is version 3 or greater, OR if the browser name is Microsoft Internet Explorer and the version is 4 or greater, then we will assign the variable version as ‘n3′. Otherwise, it is going to be ‘n2.’ Then we move on to the rest.”
One of the more common uses for browser detection is to redirect a viewer to a page made for his/her browser type or browser version.
Redirection Using Javascript:
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>
Or you can use
<HEAD> <SCRIPT language="JavaScript"> <!-- document.location.href=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>
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.
Filed under: Scripts, javascript | Tagged: appname, appversion, browser detection, javascript, location.href, navigator, redirection, settimeout, window.location
really useful post
thank u