Freigeben über

How to detect IE8 using JavaScript (Client side)

  • Artikel

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!

Comments

  • Anonymous
    April 14, 2009
    PingBack from http://microsoft-sharepoint.simplynetdev.com/how-to-detect-ie8-using-javascript-client-side/

  • Anonymous
    April 21, 2009
    Web 7WaystoQuicklyRateWebsiteQuality HowtodetectIE8usingJavaScript(Clientside) S...

  • Anonymous
    May 06, 2009
    Great little function, thank you O enlightened one :)

  • Anonymous
    July 09, 2009
    Everytime MS comes out with a new browser I have great expectation for it and they never fail to dissapoint.  They always make more work for us developers instead of making sure that they are as close to 100% w3 standards compliant, javascript compliant, and just compliant.  We are at the breaking point of not supporting any IE browsers any more because of all the hassle.

  • Anonymous
    July 12, 2009
    Dave, IE8 is W3C compliant with HTML 4 and CSS 2.1. It's more compliant than any other browser! Is there anything in particular you think it should behave in a different way in IE8? I'm happy to discuss openly on existing issues, as long as the conversation is constructive and it's not based on browser religions or bad assumptions :-) Thanks!

  • Anonymous
    August 08, 2009
    Thanks for the code, Now I have another question.  Since my original javascript code to detect IE 8 was wrong how do I know my detection for Windows 7 is correct.  To note: I do not have a computer which has windows 7 on it now to test this.  I have also search the web and could not find anything good. Here is the code I have so far: var OSName="Unknown OS"; var OS = navigator.appVersion; if (!ie) { //document.write("THIS IS NOT IE"); OS = navigator.userAgent; } if (OS.indexOf("Win")!=-1) {  if ((OS.indexOf("Windows NT 5.1")!=-1) || (OS.indexOf("Windows XP")!=-1))   OSName="Win XP";  else if ((OS.indexOf("Windows NT 7.0")!=-1))   OSName="Win 7";  else if ((OS.indexOf("Windows NT 6.0")!=-1))   OSName="Win Vista/Server 08";  else if (OS.indexOf("Windows ME")!=-1)   OSName="Win ME";  else if ((OS.indexOf("Windows NT 4.0")!=-1) || (OS.indexOf("WinNT4.0")!=-1) || (OS.indexOf("WinNT")!=-1))   OSName="Win NT";  else if ((OS.indexOf("Windows NT 5.2")!=-1))   OSName="Win Server 03";  else if ((OS.indexOf("Windows NT 5.0")!=-1) || (OS.indexOf("Windows 2000")!=-1))   OSName="Win 2000";  else if ((OS.indexOf("Windows 98")!=-1) || (OS.indexOf("Win98")!=-1))   OSName="Win 98";  else if ((OS.indexOf("Windows 95")!=-1) || (OS.indexOf("Win95")!=-1) || (OS.indexOf("Windows_95")!=-1))   OSName="Win 95";  else if ((OS.indexOf("Win16")!=-1))   OSName="Win 3.1";  else   OSName="Win Ver. Unknown";  if (OS.indexOf("WOW64")!=-1) OSName=OSName+"(x64)"  else OSName=OSName+"(x32)" } else if (OS.indexOf("Mac")!=-1) OSName="MacOS"; else if (OS.indexOf("X11")!=-1) OSName="UNIX"; else if (OS.indexOf("Linux")!=-1) OSName="Linux"; Thanks, Doug Lubey of Louisiana www.douglubey.com Reference: how to detect operating system with Javascript Javascript code to detect OS Any help would be appreciated

  • Anonymous
    August 08, 2009
    Hi Doug, if the OS is Windows 7, the userAgent will contain the new Windows NT token: Windows NT 6.1. Check out this post for more information: http://blogs.msdn.com/ie/archive/2009/01/09/the-internet-explorer-8-user-agent-string-updated-edition.aspx Hope this helps -Giorgio

  • Anonymous
    August 08, 2009
    The comment has been removed

  • Anonymous
    August 08, 2009
    As I've written in the previous answer, that is correct.

  • Anonymous
    August 08, 2009
    As I've written in the previous answer, that is correct.

  • Anonymous
    August 15, 2009
    I've written in the previous answer, that is correct.

  • Anonymous
    September 03, 2009
    nice blog! Really worth reading!!!

  • Anonymous
    September 13, 2009
    I tried the following code for an alternate style sheet under IE8 (tried on XP) another under previous IE versions and the last for all other navigators and it doesn't work. it returns the alert message -1 when i'm under IE8 here is the code: function getInternetExplorerVersion() // Returns the version of Internet Explorer or a -1 // (indicating the use of another browser). {  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; }  var ver = getInternetExplorerVersion();  if ( ver = -1 )  {  document.write("<link rel='stylesheet' href='css/vcod.css' type='text/css'>");  alert (ver);  }  else if (( ver > -1 )  && ( ver < 8.0 ))  {  document.write("<link rel='stylesheet' href='css/vcod_IE.css' type='text/css'>");  alert (ver);  }  else if ( ver >= 8.0 )  {  alert (ver);  document.write("<link rel='stylesheet' href='css/vcod_IE8.css' type='text/css'>");  } help may be useful

  • Anonymous
    November 02, 2009
    the function is very hard for me, i understand it hardly. i will come here every day!

  • Anonymous
    January 04, 2010
    Nice blog.. easy to understand... Keep posting... :)

  • Anonymous
    January 12, 2010
    For me, this is very exciting, I like this style, I hope to be able to see more

  • Anonymous
    January 16, 2010
    I'm looking for the script on how to detect the user's operating system language when they are running MSIE. Anybody know it? And does exactly what does it return (i.e. keyboard language, OS language, or some setting in the OS?))? Thanks

  • Anonymous
    January 17, 2010
    You can get the language (cross browser) with a similar function: function GetLanguage() {  var language = navigator.language ? navigator.language : navigator.userLanguage;  return language.substr(0, 2).toLowerCase(); } In IE, I believe the userLanguage is the OS natural language.

  • Anonymous
    January 31, 2010
    Hi Giorgio, I tried using your code on my XP machine with ie8 installed, but it returns 7 for rv. Is there any wrong am doing? I think "navigator.userAgent" is returning msie 7.0 which may be problem. Code used: 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);    } Please help me with that, thank you in advance.

  • Anonymous
    February 01, 2010
    Shishira: if you are trying to detect the browser (and not the rendering engine) you should use the last function in this blog post that checks for the "Trident 4.0" string. Let me know if this answer your question.

  • Anonymous
    April 15, 2010
    Good Stuff! It was just what I needed.

  • Anonymous
    April 15, 2010
    Regarding the use of the Trident number in the final function - you mention the Trident number will likely change in the future. Does this mean that IsIE8Browser() will only be a reliable method of detecting IE8 until that change? If this is the case, what sort of timescale are we talking about and is there a more durable solution? Thanks

  • Anonymous
    April 16, 2010
    @Kfo: You can read more about the IE9 User Agent here: http://blogs.msdn.com/ie/archive/2010/03/23/introducing-ie9-s-user-agent-string.aspx Shortly, the Trident version will change to 5.

  • Anonymous
    April 26, 2010
    Thank you, that's what I was searching for...