IE Pinned Sites Part 9: Patterns to make your pinned site code play nice in all browsers

發行項
05/11/2011

In the last 4 blog posts, I’ve demonstrated using JavaScript to create various experiences in your pinned site (dynamic Jump List categories, overlay icons, thumbnail toolbar buttons, and flashing taskbar buttons).

You may have been wondering if this JavaScript would play nicely in a browser other than Internet Explorer 9. Fair question! In this post, I’ll show you two patterns for making your pinned site code play nice in all browsers.

Pattern 1

The first pattern is a try/catch pattern. Wrap your existing pinned site code inside the try block. Errors will be swallowed in the catch block.

 try {
    if (window.external.msIsSiteMode()) {
        // Your pinned site code goes here.
    }
}
catch (e) { }

Pattern 2

The second pattern checks for the existence of the msAddSiteMode type before proceeding.

 if (typeof window.external.msAddSiteMode != "undefined") {
    // SiteMode is supported 
    if (window.external.msIsSiteMode()) {
        // Your pinned site code goes here.
    }
}

For example, here is one of the scripts from the Windows Development Boot Camp site.

 <script type="text/javascript">
    // Jump list categories
    if (window.external.msIsSiteMode()) {
        window.external.msSiteModeCreateJumplist('Resources');
        window.external.msSiteModeAddJumpListItem('Jennifer Blog', 'https://blogs.msdn.com/jennifer', 'https://windowsdevbootcamp.com/favicon.ico');
        window.external.msSiteModeAddJumpListItem('Twitter', 'https://www.twitter.com/windevbootcamp', 'https://a3.twimg.com/a/1294164987/images/iefavicon.ico');
        window.external.msSiteModeAddJumpListItem('Silverlight 4', 'https://bit.ly/dvR7Hb', 'https://windowsdevbootcamp.com/favicon.ico');
        window.external.msSiteModeAddJumpListItem('Internet Explorer 9', 'https://bit.ly/b9HBZu', 'https://windowsdevbootcamp.com/favicon.ico');
        window.external.msSiteModeAddJumpListItem('Windows 7 Training Kit for Developers', 'https://bit.ly/cXaJ1u', 'https://windowsdevbootcamp.com/favicon.ico');
        window.external.msSiteModeAddJumpListItem('Windows API Code Pack', 'https://bit.ly/bGKULt', 'https://windowsdevbootcamp.com/favicon.ico');
        window.external.msSiteModeShowJumplist();
    }
</script>

If I leave the script like that, it will throw an error (which I can see in Firebug) when I open the site in Firefox. (Note that this error is suppressed if a non-developer user opened the site in Firefox normally, so they wouldn’t see anything. But using Firebug, we can see that there is an error.)

Now, let me wrap the script with one of the patterns described above.

 <script type="text/javascript">
    // Jump list categories
    if (typeof window.external.msAddSiteMode != "undefined") {
        if (window.external.msIsSiteMode()) {
            window.external.msSiteModeCreateJumplist('Resources');
            window.external.msSiteModeAddJumpListItem('Jennifer Blog', 'https://blogs.msdn.com/jennifer', 'https://windowsdevbootcamp.com/favicon.ico');
            window.external.msSiteModeAddJumpListItem('Twitter', 'https://www.twitter.com/windevbootcamp', 'https://a3.twimg.com/a/1294164987/images/iefavicon.ico');
            window.external.msSiteModeAddJumpListItem('Silverlight 4', 'https://bit.ly/dvR7Hb', 'https://windowsdevbootcamp.com/favicon.ico');
            window.external.msSiteModeAddJumpListItem('Internet Explorer 9', 'https://bit.ly/b9HBZu', 'https://windowsdevbootcamp.com/favicon.ico');
            window.external.msSiteModeAddJumpListItem('Windows 7 Training Kit for Developers', 'https://bit.ly/cXaJ1u', 'https://windowsdevbootcamp.com/favicon.ico');
            window.external.msSiteModeAddJumpListItem('Windows API Code Pack', 'https://bit.ly/bGKULt', 'https://windowsdevbootcamp.com/favicon.ico');
            window.external.msSiteModeShowJumplist();
        }
    }
</script>

If I open the site using Firefox again, I don’t see any errors in Firebug.