Ecommerce Developer
 
 

Code

Identifying IE with a Simple JavaScript

By Armando Roggio on January 06, 2011 · with 2 Comments

 

Prior to its most recent beta, Microsoft Internet Explorer (IE), for better or for worse, differed significantly from version to version and from other popular browsers, requiring web developers to code some portions of their sites or web applications twice or more.

There are several browsers that are generally considered to be web-standards compliant. These are Mozilla Firefox, Google Chrome, Opera, Apple Safari, and the recently released IE9 beta, which renders pages more like Firefox or Chrome than previous versions of IE. In opposition to these compliant browsers are the various and sundry versions of IE from before the release of IE9.

Because of these differences — and here I mean even the differences between the various versions of IE — it can be very helpful to identify both that a user has IE and which version of IE is in use.

For example, I recently found a significant difference between how IE8, IE7, and IE6 calculated the offsetTop and offsetLeft properties of an element to which I wanted to dynamically add a modal window. The differences were enough that I was going to need to use slightly different calculations for each of these three versions of IE.

So I had to come up with a simple way to identify IE in JavaScript, and, frankly, I wasn't exactly sure what was the best or most efficient method to do it.

The Conditional Hack

After browsing some blogs, forums, and pages for suggestions, I found a hack that used IE's unique conditional comments to set a variable. Ultimately, I didn't use this technique, but I thought it was clever enough that I should mention it.

<!—[if IE  7]>
<script>
Ie = 7;
</script>
<![endif-->

Inserted in the head of an HTML document, conditional comments are only read by IE on Windows, so I could check for the variable in my external JavaScript files

If(ie == 7){
	doSomething();
}

But using this technique required a lot of seemingly extra HTML.

<!—[if IE  6]>
<script>
Ie = 6;
</script>
<![endif-->

<!—[if IE  7]>
<script>
Ie = 7;
</script>
<![endif-->

<!—[if IE  8]>
<script>
Ie = 8;
</script>
<![endif-->

A Simple Script to Identify IE

After a little more looking around, I came across — on the Microsoft Developers Network and a Microsoft Support page — a great post about detecting IE. The post and support page both described in detail different JavaScript functions for determining which version of IE a user had.

I based my solution, which is now employed in an ecommerce website, on these two Microsoft posts. Here it is.

function isIE(){
	var returnValue = undefined;
	if (navigator.appName == 'Microsoft Internet Explorer'){
		var ua = navigator.userAgent;
		var ie = ua.indexOf('MSIE')
		returnValue = parseInt(ua.substring(ie+5, ua.indexOf ('.', ie)));
	}
	return returnValue;
}

Now, let's take a look at the function line-by-line, starting with declaring the function.

function isIE(){

Nothing special here, just your basic function. Next, I initialize a variable called returnValue and set it to "undefined." In this way, if I run isIE() and test its result in a conditional statement, it will return "false" ("undefined" is "false" in Bolean logic) by default.

var returnValue = undefined;

I am not interested in this function for all browsers; I want just IE. So I add a conditional statement that checks to learn if the navigator.appName matches IE's appName.

if (navigator.appName == 'Microsoft Internet Explorer'){

If any other browser is in use, this conditional statement will be false, and the function will return "undefined." This way, if I test for isIE(), I will get "false" when the browser in use is not IE.

Next, I want to set a variable equal to the browser's userAgent. The userAgent is one of the navigator object's properties and it holds a string described the browser. In the case of IE7, the navigator.userAgent will look like the following.

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)

Notice that it identifies the specific version of IE that is in use.

var ua = navigator.userAgent;

Of course, a userAgent can vary based on the specific versions and operating system in use, so I need to work a little harder to extract just the version number. The first step in this process is to use indexOf().

var ie = ua.indexOf('MSIE')

JavaScript's indexOf() method returns the position (as a number) of the initial instance of a value in a string. Applied to the userAgent, this method counts in from the first character all the way to the beginning of the value "MSIE."

If the userAgent content was "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)," the indexOf method would return 25, since the "M" in "MSIE" is exactly 26 characters and spaces from the beginning of the string.

Now, I am going to reset the value of the variable, returnValue.

returnValue = parseInt(ua.substring(ie+5, ua.indexOf ('.', ie)));

This code uses three JavaScript methods. The first method, parseInt parses a string and returns the integer value of that string. Its job here is to make sure that I get back just a number.

The next method is substring(). This method extracts the portion of a string found between a starting point and an ending point. For example, if you had the word "ecommerce" and you used substring(2,4), JavaScript would return "com" since the "c" is the second position in the string and "m" is the fourth. Notice that the result is inclusive of the starting and ending position.

In my function, I tell the substring() method to start at ie+5. Remember ie is a variable representing _ ua.indexOf('MSIE'). In the example _userAgent string, "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)," it will return "25." By adding "5" I move the position past "MSIE" and the blank space that follows it. Essentially, I am telling JavaScript to start the substring() method at the "7."

I then set the ending point to ua.indexOf('.', ie). Here the '.' represents the period after the "7" in the string. The second parameter ie, tells the method where to start. By default it will start at position "0," but for our purposes we need it to start at position "25," since we don't want any periods that may occur earlier in the string to mess up the function.

Finally, the isIE() function returns returnValue, which in this example will be "7."

Summing Up,

In this tutorial, I have described a relatively simple method for identifying when a user is employing IE and which version of IE is in use. I hope you find this post helpful.

Related Articles

Search Terms

2 Comments

Rss-sm