How to detect IE8 using JavaScript (Client side)

A question I’ve been asked recently is  “How can I detect IE8 using JavaScript?”. There are several ways to accomplish this task, and each one will have his pros and cons. In this post I will show the best practices to detect IE8 on real world scenarios.

If you have any feedback or you would like to suggest an alternative method, please feel free to add a comment to this post.

Detect the IE rendering engine

In the past, the Version Token (the token of the User Agent string which looks like “MSIE 7.0”) used to be a clear indicator of the browser version (IE6, IE7, …). Today, since IE8 include 3 rendering engines (IE8 Standards, IE7 Compatibility, IE6 Quirks), IE8 will set the Version Token dynamically, based on the user compatibility settings for each site.

For instance:

  • Using IE8, if the site is in the compatibility list view, the VT will be MSIE 7.0
  • Using IE8, if the site is in the compatibility list view, and the site owner used the X-UA-Compatible meta tag with “IE=8”, the VT will be MSIE 8.0
  • Using IE8, if the site is NOT in the compatibility list view, the VT will be MSIE 8.0
  • If you are debugging a site using the IE8 Developer Tools and you set the Document Mode to IE7, the VT will be MSIE 7.0
  • Using IE7, the VT will be MSIE 7.0

As you can see from the previous examples, the VT shows what rendering engine is used by IE to display the site...no matter the version of the browser.

 function getInternetExplorerVersion() {
     var rv = -1; // Return value assumes failure.
     if (navigator.appName == 'Microsoft Internet Explorer') {
         var ua = navigator.userAgent;
         var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
         if (re.exec(ua) != null)
             rv = parseFloat(RegExp.$1);
     }
     return rv;
 }
 function checkVersion() {
     var msg = "You're not using Windows Internet Explorer.";
     var ver = getInternetExplorerVersion();
     if (ver > -1) {
         if (ver >= 8.0)
             msg = "You're using a recent copy of Windows Internet Explorer."
         else
             msg = "You should upgrade your copy of Windows Internet Explorer.";
     }
     alert(msg);
 }

Check this MSDN article for more information about this function.

Detect if Web Slices, Accelerator, Visual Search are supported by the browser

The previous function will not tell us if the Web Slices, Accelerators and Visual Search are supported by the current browser (remember, those features always work in IE8, regardless the rendering engine adopted).

In general, the best practice is to check if each feature is supported by the current browser; this statement might sound generic or “too complex”. However, since web standards and browser keep evolving, it’s not possible to know today if a feature will be supported from the same (or other browsers) in the future. Obviously this concept applies to either Internet Explorer, Firefox, Opera, ….

In particular, I recommend to use the following functions:

 function WebSliceSupported {
     return (typeof (window.external.AddToFavoritesBar) != "undefined");
 }
  
 function AcceleratorSupported {
     return (typeof (window.external.AddService) != "undefined");
 }  
       
 function VisualSearchSupported {
     return (typeof (window.external.AddService) != "undefined");
 }

NOTE: in case you are adding web slices to your site, I recommend to build them for any browser (they will be transparent to other browsers…); or, if you want to send them only to IE8, you should detect the browser on the server side.

Detect IE as browser

There are scenarios where you might still want to know the version of IE installed on the machine. For instance, let’s say you want to suggest your users to upgrade from IE6 to IE8.

In this case, the best client-side solution is to check if the query string contains the new token “Trident 4.0”.

 function IsIE8Browser() {
     var rv = -1;
     var ua = navigator.userAgent;
     var re = new RegExp("Trident\/([0-9]{1,}[\.0-9]{0,})");
     if (re.exec(ua) != null) {
         rv = parseFloat(RegExp.$1);
     }
     return (rv == 4);
 }

NOTE: since the Trident number will most likely change in the future, we don’t recommend to use this function as an indicator of web slices, accelerators or visual search support.

Other useful resources

IE Blog: IE8 User Agent string

Version Vectors

Happy detection!