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!

Comments (24)

  1. gOODiDEA says:

    Web 7WaystoQuicklyRateWebsiteQuality

    HowtodetectIE8usingJavaScript(Clientside)

    S…

  2. Magnus says:

    Great little function, thank you O enlightened one 🙂

  3. Dave M says:

    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.

  4. gisardo says:

    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!

  5. SafetyMan says:

    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

    http://www.douglubey.com

    Reference:

    how to detect operating system with Javascript

    Javascript code to detect OS

    Any help would be appreciated

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

  7. SafetyMan says:

    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

  8. As I’ve written in the previous answer, that is correct.

  9. As I’ve written in the previous answer, that is correct.

  10. tiffany says:

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

  11. nice blog! Really worth reading!!!

  12. Fabien says:

    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

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

  14. Shilpa says:

    Nice blog.. easy to understand…

    Keep posting… 🙂

  15. Mobile phone says:

    For me, this is very exciting, I like this style, I hope to be able to see more

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

  17. gisardo says:

    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.

  18. Shishira says:

    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.

  19. gisardo says:

    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.

  20. FerretX says:

    Good Stuff!

    It was just what I needed.

  21. Kfo says:

    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

  22. gisardo says:

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

  23. Sven says:

    Thank you, that’s what I was searching for…