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.
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 likeversion 4.51. It just sends back 4 in that case. Thus, we could alertviewers 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> |
As you can see, that uses a lot of the logical operators from a previous section.It is basically saying that "if the browser name is Netscape and it isversion 3 or greater, OR if the browser name is Microsoft InternetExplorer and the version is 4 or greater, then we will assign thevariable version as 'n3'. Otherwise, it is going to be 'n2.' Then wemove 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. We will discuss that in the next section on redirection.
Well, that does it for now. Let's go check out the next section, Redirection with JavaScript.
Related Articles
- Last Modified and User's Screen Resolution DetectionAn easy and efficient way to write the date a file was last modified.
We call the function filemtime() that returns an integer (the number of seconds elapsed from Jan 1st, 1970 00:00 GMT) Anyway, to make this integer viewable by human beings, we just format it using date() function. - JavaScript Confirmation BoxesA javascript confirmation box can be a handy way to give your visitors a choice of whether or not an action is performed. A confirmation box will pop up much like an alert box, but will allow the viewer to press an OK or Cancel button.
- JavaScript RedirectionRedirection is often used to take viewers to a page depending on their browsers name or version. To redirect a viewer instantly, you just need to add a short command in your head section:
- The Basics- JavaScript TutorialTo get started with JavaScript, you will want to be able to see the tag that will set a script apart from the HTML. The tags used to begin and end a script are the tags. The opening tag should appear like this
- 4 Powerful Features of Javascript Programming LanguageIn the community of web developers and surfers, Javascript is highly popular as client side scripting language for web browsers. Lets take a look at some of the features of this language.
- Statusbar MessageThis is a quick, and quite simple tutorial. Now its not html, it uses Javascript. What it does is lets you customize what it says in the status bar usually at the bottom left of your browser. Right now in your browser it should say Infinite Designs.org ..... Heres how to make it do that...
- Form ValidationLearn the different ways of validating your form with Javascript.
- Beginner JS Pt. 1This tutorial is a well laid out recipe for basic Javascript. The article is brief and is limited to three topics: Calling the Script, Writing Comments, and Doing Stuff (Basic). Illustrations make it easy.
- JavaScript PromptsWell, lets say you wanted to get somebodys name before they saw the page, and then write their name on your page right before their very eyes... Well, you can do this using a javascript prompt. Heres the command:
- JavaScript AlertsWell, you want to add one of those JavaScript alert boxes that come out of nowhere, dont you? Okay, lets begin with the alert box that just tells the viewer something you want them to know. Heres the alert command:
