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!

You’ve seen the new IE8 features on a website, on a video, on the IE Gallery, on Channel9, on a blog, on your friend’s pc…and you are interested to build your own version?

Here’s a few links to start!

More info available here.

Internet Explorer 8 brings a lot of new features to web developers. Check out these free Virtual Labs if you want to know more!

You’ve probably already seen how Internet Explorer 8 Accelerators allow you to perform searches very quickly on the web. What about going one step ahead, showing a video preview instead of a “plain text” result? Check out the result!

A- Add the MSN Accelerators

Add MSN Video Accelerator

B – Test it here :-)

• Hello World
• Dream Theater
• Metallica
• Bon Jovi
• Bill Gates
• Roberto Benigni
• Back to the future
• Ask a ninja

C – Look and download the code

Now that you’ve seen the accelerator in action, let’s have a look at the code behind.

You will notice that – for this sample – I’ve written only client side code (Javascript), using the free Visual Web Developer 2008.

The complete source code of this sample is available here.

MsnAccelerator.xml

<openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">

  <homepageUrl>http://localhost/MsnAccelerator</homepageUrl>

  <display>

    <name>Play with MSN</name>

    <icon>http://localhost/MsnAccelerator/favicon.ico</icon>

  </display>

  <activity category="Play">

    <activityAction context="selection">

      <preview action="http://localhost/MsnAccelerator/MsnPreview.htm?sel={selection}" />

      <execute action="http://localhost/MsnAccelerator/MsnSearch.htm?q={selection}" >

      </execute>

    </activityAction>

  </activity>

</openServiceDescription>

The Accelerator descriptor contains the details of our accelerator. In this case we are creating a new accelerator in the custom category “Play”; the accelerator will send the selected text to MsnPreview.htm page through the sel parameter.

MsnSearch.htm

This page will be called when the user click on the “Play with MSN” menu; in this scenario I’m redirecting the user to the existing search page on the msn.com website (providing the current search keyword in the querystring).

Discover.htm

The code required to add the accelerator is easy as follow.

<button onclick="window.external.AddService('MSN.xml')">

            Add MSN Video Accelerator

        </button>

MsnPreview.htm

The preview is probably the most interesting and powerful part of an accelerator, since it can show really rich content using any client language (HTML, Javascript, Silverlight, Flash, ….).

In this scenario I’m performing the following operations using Javascript, in order:

1. Get user selection
2. Search video on msn.com
3. Build player control

Let’s break it down to functional pieces.

1- Get user selection: the selected text is provided to the preview page through the sel parameter of the querystring, as described previously.

function getQueryStringParameter(param) {

            var qs = window.location.search.substring(1);

            var ps = qs.split("&");

            for (i = 0; i < ps.length; i++) {

                var p = ps[i].split("=");

                if (p[0] == param) {

                    return p[1];

                }

            }

            return null;

        }

        window.onload = searchVideo;

2- Search video on msn.com

Going around the live.com site, I found that the following url perform a search on msn.com, returning the result as RSS feed.

http://edge4.catalog.video.msn.com/Search.aspx?q=QUERY&responseEncoding=rss

Due to cross-domain restriction with the server (remember, we are doing the call client side here), I created a pipe (using Yahoo Pipes) that will return the result of my query using JSON format. Note that this is just one of the possible ways to do this; if the server supported cross-domain requests, I would used instead the new XDomainRequest.

function searchVideo() {

            var selection = getQueryStringParameter("sel");

            if (selection != null) {

                var newScript = document.createElement('script');

                newScript.type = 'text/javascript';

                newScript.src = 'http://pipes.yahoo.com/pipes/pipe.run?_id=VjRuAucf3hG8ewtoZcag4A&_render=json&run=1&sel='

                            + selection +

                            '&_callback=getVideo';

                document.getElementsByTagName("head")[0].appendChild(newScript);

            }

        }

        function getVideo(feed) {

            var result = feed.value.items;

            if (result != null && result.length > 0)

                buildVideo(result[0].content);

            else {

                setContent('No result found.', true);

            }

        }

As you can see in the following picture, the pipe will get the feed, extract the first item and return only the guid value through the designated callback.

3- Build player control

The last step, given the id of the video, is to build dynamically the video player and add it to the page.

function buildVideo(id) {

            var video = document.createElement('embed');

            video.src = 'http://images.video.msn.com/flash/soapbox1_1.swf';

            video.type = "application/x-shockwave-flash";

            video.flashvars = "c=v&v=" + id + "&ifs=true&ap=true"

            video.width = "320px";

            video.height = "240px";

            video.allowfullscreen = "false";

            setContent(video);

        }

That’s it! With a bunch of JavaScript code, I now have a very powerful accelerator.

The complete source code of this sample is available here.

D – Next step

Exercise to the reader: it would be interesting to improve the UI and show more than one video result, maybe using Silverlight ;)

If you want to know more about IE8 Accelerators or you want to build your own, I recommend reading the following resources:

• MSDN: Accelerator Developer Guide
• MSDN: Accelerator XML Descriptor Template
• IE BLOG: Accelerator Spotlight
• IE ADDONS GALLERY: Try other accelerators

Ciao!

Disclaimer: the accelerator in this post is not supported by the writer, neither by MSN or Microsoft. They are rather provided as is, for the sake of learning and having fun :-)