Giorgio Sardo Blog

Senior Director of Windows, Windows Phone & XBOX Technical Evangelism & Development at Microsoft Corporation

How to detect IE8 using JavaScript (Client side)

How to detect IE8 using JavaScript (Client side)

  • Comments 24

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!

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

  • Web 7WaystoQuicklyRateWebsiteQuality

    HowtodetectIE8usingJavaScript(Clientside)

    S...

  • Great little function, thank you O enlightened one :)

  • 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.

  • 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!

  • 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

  • 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

  • I may have found it on this website.

    It did not come right out say "here is the code"

    But it did say

    The major version for windows 7 =6

    And the minor version for windows 7 = 1

    or add this javascript code:

    || (OS.indexOf("Windows NT 6.1")!=-1))

    to the windows 7 detection line.

    OF COURSE I STILL HAVE NO WAY TO TEST THIS....

    PLEASE HELP.

    Thanks,

    doug lubey of louisiana

  • As I've written in the previous answer, that is correct.

  • As I've written in the previous answer, that is correct.

  • I've written in the previous answer, that is correct.

  • nice blog! Really worth reading!!!

  • 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

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

  • Nice blog.. easy to understand...

    Keep posting... :)

Page 1 of 2 (24 items) 12