Jump to content

ie6 incompatibility

yourpostalfriend's Photo
Posted Nov 10 2012 01:34 PM
1535 Views

IE6 does not show my page correctly. What can I do to have a browser check and redirect to microsoft to upgrade?

Tags:
0 Subscribe


2 Replies

0
  gregimba's Photo
Posted Nov 17 2012 02:37 PM

The way I have seen people deal with IE incompatibility is via the IE conditional comments

Example of conditional statement:
https://gist.github.com/4100858


Read more about conditional statements at:
http://msdn.microsof...2(v=vs.85).aspx
0
  Rick001's Photo
Posted Nov 23 2012 05:56 PM

Conditional statements are typically used to deliver IE-specific content - I think its interesting that you could just as easily wrap Javascript with conditional statements as well. In any event, here's the Javascript way of detecting browser type and version, albeit only for MSIE though its trivial to extend whats presented here for other browsers.

The following assumes some familiarity with Javascript.

The navigator object's userAgent property contains all the information needed to determine the type of browser. A Google search will reveal many scripts to do browser detection - but I'll provide a quick script of my own written specifically for this question.

In addition to the userAgent you may also discover some details about the user's client via two additional navigator properties which are navigator.appName and navigator.appVersion. You will find the appVersion property to be less then ideal (for example, MSIE9 will report as version 5) and the appName will be the full name of the browser - which is ok. For me I find it more convenient to deal with the userAgent property since everything that I'll be looking for is contained in the resulting string.

First, add a script tag to your page and while we are at it lets assign the userAgent's value to a variable so that we can easily reference it:

<script type="text/javascript">
var ua = navigator.userAgent;
</script>

Next, lets come up with a simple regular expression for detecting MSIE.

<script type="text/javascript">
var ua = navigator.userAgent;
var msieTest = /MSIE/gi;
</script>

Regular expressions are pretty powerful tools for finding patterns in strings. The navigator.userAgent value is a string and the regular expression (/MSIE/gi) will let us discover if "MSIE" is contained within it. If it is, then we know that we're dealing with Internet Explorer.

To use the regular expression we will use the regular expression "test" method. See below:

<script type="text/javascript">
var ua = navigator.userAgent;
var msieTest = /MSIE/gi;
var isMSIE = msieTest.test(ua);
</script>

Looking at the above, you can see that I've created a variable called "isMSIE" and set it equal to the result of the "test". The "test" method will return true if "MSIE" is found and "false" otherwise.

Knowing that, we just need to compare against the value of "isMSIE" and then take whatever action we deem necessary as seen below.

<script type="text/javascript">
var ua = navigator.userAgent;
var msieTest = /MSIE/gi;
var isMSIE = msieTest.test(ua);
if (isMSIE){
alert('You are using Internet Explorer');
} else {
alert('You are not using Internet Explorer');
}
</script>

We now have a pretty basic yet effective browser sniffer that is looking specifically for Internet Explorer. It would be more useful though to know the browser version as well. For that, lets use another regular expression to find where the version number is in the userAgent string. We know that the version comes right after the "MSIE" characters within the userAgent value so we write an expression that looks for it:

/MSIE \d.\d/gi

The regular expression "match" method will return to us an array of all matching values based on the above expression - in this case we know that there will always only be a single answer so we will look at the first index of the array to retrieve it. The next step will be to extract the numerical value - see the following:

var msieVersionStr = ua.match(/MSIE \d.\d/gi);
var msieVersionNum = parseFloat(msieVersionStr[0].substr(5,msieVersionStr[0].length));

"msieVersionNum" will hold the browser version for Internet Explorer. As it will **only** work for Internet Explorer we need to put it inside of the if statement that checks for the existence of Internet Explorer. That would look like this:

<script type="text/javascript">
var ua = navigator.userAgent;
console.log(ua);
var ua = navigator.userAgent;
var msieTest = /MSIE/gi;
var isMSIE = msieTest.test(ua);
if (isMSIE){
var msieVersionStr = ua.match(/MSIE \d.\d/gi);
var msieVersionNum = parseFloat(msieVersionStr[0].substr(5,msieVersionStr[0].length));
} else {
alert('You are not using Internet Explorer');
}
</script>

Finally, to wrap this all up, we add some version checks in the form of additional "if" statements:

<script type="text/javascript">
var ua = navigator.userAgent;
console.log(ua);
var ua = navigator.userAgent;
var msieTest = /MSIE/gi;
var isMSIE = msieTest.test(ua);
if (isMSIE){
var msieVersionStr = ua.match(/MSIE \d.\d/gi);
var msieVersionNum = parseFloat(msieVersionStr[0].substr(5,msieVersionStr[0].length));
if (msieVersionNum > 9){
alert('You are using MSIE ' + msieVersionNum);
} else if (msieVersionNum == 9){
alert('You are using MSIE 9');
} else if (msieVersionNum == 8){
alert('You are using MSIE 8');
} else if (msieVersionNum == 7){
alert('You are using MSIE 7');
} else if (msieVersionNum > 6){
alert('You are using MSIE 6 or earlier');
}
} else {
alert('You are not using Internet Explorer');
}
</script>

And thats it, this script will check for Internet Explorer 6 and up.