|
|
Understanding the Navigator Object better
Posted On January 8, 2008 by Sneha Philipose filed under Internet
One of the most important aspects of web programming is an ability to understand the user browsing your website. There is a lot to be learnt and a lot to be disseminated from the information you can possibly collect using the information from the users operating system and browser preferences.
You might already know that during the browser wars, very few vendors paid any attention to ensure that what they deliver is, compliant to what others are delivering. This has resulted in many incompatibilities and standards issues.
One of the biggest worries of a web application developer is the standards incompatibility and how different browsers running different operating system will render his or her web page.
For example, a page may be rendered with noticeable differences by the same version of Mozilla FireFox on Windows and Linux. Web designers hence need to make subtle design changes depending on the browser. The usual suspects are some of the CSS tags that render differently in different browsers.
This exercise is to identify the different browsers, and operating systems used by a visitor to your website.
There are two methods to detect browser and operating system settings using JavaScript--the object/feature detection and the user-agent string detection.
Object Detection
Object detection is a generic way of determining a browser’s capabilities. This, essentially checks, whether a given object exists, or not, and then, depending on the condition, executes some other code.
For example, a code such as
| .................................................. if (document.getElementById) { //Something gets executed// } else { //something else gets executed// } |
UserAgent detection
One of the old methods in browser detection user agents is a way of telling you what programming connecting to the server. Every web server has to accept a user agent string from any application connecting to it. The userAgent property of navigator object in JavaScript is a way to provide client side access to the userAgent property.
Let us start writing the browser detection script. Since these days we believe a lot in the Don’t Repeat Yourself (DRY), I am borrowing portions of two scripts written by Andrew Ponting and Nicholas C Zakas.
First create the variables to store userAgent strings as given below.
var sUserAgent = navigator.userAgent;
var fAppVersion = parseFloat(navigator.appVersion);
The variable fAppVersion is used to determine the appVersion, which is essentially a float within a string. The function parseFloat is used to convert string to floating-point number.
The next step is to write a function to compare versions. This is slightly a tricky one, as you are comparing two strings. The code below is self-explanatory. What it does is, it throws a Boolean result depending whether two versions are equal, less or more.
| ................................................................................................................................................ function compareVersions(sVersion1, sVersion2) { var aVersion1 = sVersion1.split("."); var aVersion2 = sVersion2.split("."); if (aVersion1.length > aVersion2.length) { for (var i=0; i < aVersion1.length - aVersion2.length; i++) { aVersion2.push("0"); } } else if (aVersion1.length < aVersion2.length) { for (var i=0; i < aVersion2.length - aVersion1.length; i++) { aVersion1.push("0"); } } for (var i=0; i < aVersion1.length; i++) { if (aVersion1[i] < aVersion2[i]) { return -1; } else if (aVersion1[i] > aVersion2[i]) { return 1; } } return 0; } |
Detect whether the browser is Opera
The first step will be to check whether the browser is Opera or Safari. Less than six per cent of the browser market is on a non IE/Mozilla browser. But identifying them is really a problem.
| ................................................................................................................................................ var isOpera = sUserAgent.indexOf("Opera") > -1; var isMinOpera4 = isMinOpera5 = isMinOpera6 = isMinOpera7 = isMinOpera7_5 = false; if (isOpera) { var fOperaVersion; if(navigator.appName == "Opera") { fOperaVersion = fAppVersion; } else { var reOperaVersion = new RegExp("Opera (\\d+\\.\\d+)"); reOperaVersion.test(sUserAgent); fOperaVersion = parseFloat(RegExp["$1"]); } isMinOpera4 = fOperaVersion >= 4; isMinOpera5 = fOperaVersion >= 5; isMinOpera6 = fOperaVersion >= 6; isMinOpera7 = fOperaVersion >= 7; isMinOpera7_5 = fOperaVersion >= 7.5; } |
Detecting Konqueror or Safari
Safari is the browser in the new Apple Macs that are shipping. Both Konqueror seen on KDE based systems and Safari are based on KHTML project.
| ................................................................................................................................................ var isKHTML = sUserAgent.indexOf("KHTML") > -1 || sUserAgent.indexOf("Konqueror") > -1 || sUserAgent.indexOf("AppleWebKit") > -1; var isMinSafari1 = isMinSafari1_2 = false; var isMinKonq2_2 = isMinKonq3 = isMinKonq3_1 = isMinKonq3_2 = false; if (isKHTML) { isSafari = sUserAgent.indexOf("AppleWebKit") > -1; isKonq = sUserAgent.indexOf("Konqueror") > -1; if (isSafari) { var reAppleWebKit = new RegExp("AppleWebKit\\/(\\d+(?:\\.\\d*)?)"); reAppleWebKit.test(sUserAgent); var fAppleWebKitVersion = parseFloat(RegExp["$1"]); isMinSafari1 = fAppleWebKitVersion >= 85; isMinSafari1_2 = fAppleWebKitVersion >= 124; } else if (isKonq) { var reKonq = new RegExp("Konqueror\\/(\\d+(?:\\.\\d+(?:\\.\\d)?)?)"); reKonq.test(sUserAgent); isMinKonq2_2 = compareVersions(RegExp["$1"], "2.2") >= 0; isMinKonq3 = compareVersions(RegExp["$1"], "3.0") >= 0; isMinKonq3_1 = compareVersions(RegExp["$1"], "3.1") >= 0; isMinKonq3_2 = compareVersions(RegExp["$1"], "3.2") >= 0; } } |
Internet Explorer
You can identify an IE browser by checking the user-agent string of IE. They usually have terms MSIE and compatible. However sometimes, Opera disguised as IE will also return these two variables. So, the trick is to check whether it is Opera too.
| ................................................................................................................................................ var isIE = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE") > -1 && !isOpera; var isMinIE4 = isMinIE5 = isMinIE5_5 = isMinIE6 = false; if (isIE) { var reIE = new RegExp("MSIE (\\d+\\.\\d+);"); reIE.test(sUserAgent); var fIEVersion = parseFloat(RegExp["$1"]); isMinIE4 = fIEVersion >= 4; isMinIE5 = fIEVersion >= 5; isMinIE5_5 = fIEVersion >= 5.5; isMinIE6 = fIEVersion >= 6.0; } |
Mozilla and Netscape
All Mozilla user-agent strings have “Gecko” inside it, and the option is to check whether Gecko string is there or not.
| ................................................................................................................................................ var isMoz = sUserAgent.indexOf("Gecko") > -1 && !isKHTML; var isMinMoz1 = sMinMoz1_4 = isMinMoz1_5 = false; if (isMoz) { var reMoz = new RegExp("rv:(\\d+\\.\\d+(?:\\.\\d+)?)"); reMoz.test(sUserAgent); isMinMoz1 = compareVersions(RegExp["$1"], "1.0") >= 0; isMinMoz1_4 = compareVersions(RegExp["$1"], "1.4") >= 0; isMinMoz1_5 = compareVersions(RegExp["$1"], "1.5") >= 0; } var isNS4 = !isIE && !isOpera && !isMoz && !isKHTML && (sUserAgent.indexOf("Mozilla") == 0) && (navigator.appName == "Netscape") && (fAppVersion >= 4.0 && fAppVersion < 5.0); var isMinNS4 = isMinNS4_5 = isMinNS4_7 = isMinNS4_8 = false; if (isNS4) { isMinNS4 = true; isMinNS4_5 = fAppVersion >= 4.5; isMinNS4_7 = fAppVersion >= 4.7; isMinNS4_8 = fAppVersion >= 4.8; } |
Platform/Operating System Detection
Now, let us check for platform/operating system detection.
It is possible to check for the platform, which is broadly divided into three families— Windows, Unix and Macintosh. You can check using the navigator.platform property and then checking for user-agent strings.
| ................................................................................................................................................ var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows"); var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh"); var isUnix = (navigator.platform == "X11") && !isWin && !isMac; var isWin95 = isWin98 = isWinNT4 = isWin2K = isWinME = isWinXP = false; var isMac68K = isMacPPC = false; var isSunOS = isMinSunOS4 = isMinSunOS5 = isMinSunOS5_5 = false; if (isWin) { isWin95 = sUserAgent.indexOf("Win95") > -1 || sUserAgent.indexOf("Windows 95") > -1; isWin98 = sUserAgent.indexOf("Win98") > -1 || sUserAgent.indexOf("Windows 98") > -1; isWinME = sUserAgent.indexOf("Win 9x 4.90") > -1 || sUserAgent.indexOf("Windows ME") > -1; isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 || sUserAgent.indexOf("Windows 2000") > -1; isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows XP") > -1; isWinNT4 = sUserAgent.indexOf("WinNT") > -1 || sUserAgent.indexOf("Windows NT") > -1 || sUserAgent.indexOf("WinNT4.0") > -1 || sUserAgent.indexOf("Windows NT 4.0") > -1 && (!isWinME && !isWin2K && !isWinXP); } if (isMac) { isMac68K = sUserAgent.indexOf("Mac_68000") > -1 || sUserAgent.indexOf("68K") > -1; isMacPPC = sUserAgent.indexOf("Mac_PowerPC") > -1 || sUserAgent.indexOf("PPC") > -1; } if (isUnix) { isSunOS = sUserAgent.indexOf("SunOS") > -1; if (isSunOS) { var reSunOS = new RegExp("SunOS (\\d+\\.\\d+(?:\\.\\d+)?)"); reSunOS.test(sUserAgent); isMinSunOS4 = compareVersions(RegExp["$1"], "4.0") >= 0; isMinSunOS5 = compareVersions(RegExp["$1"], "5.0") >= 0; isMinSunOS5_5 = compareVersions(RegExp["$1"], "5.5") >= 0; } } |
The next step is to check whether your script is working or not. You can save this script as a .js file and then use it inside a web page. But before we do that we need to learn more about other BOM objects. We will recheck on the navigator object later.