IE9 + jQuery’s bgiframe

IE9 + jQuery’s bgiframe

With the release of Internet Explorer 9 on Monday (Mar 14th), I've been going through my various websites to ensure everything is working as expected in the new browser. For the most part, I have seen no problems and, in fact, I have only seen benefits of new CSS3 and HTML5 standards in IE9 (rounded corners, woohoo!). But, this post is dedicated to the only issue I've found so far... the "bgiframe" plugin for jQuery.

The Perfect Storm

There's a specific scenario in which this plugin will fail:

  1. Windows Vista (Windows NT 6.0) or Windows Media Center in Windows 7 (Media Center PC 6.0)
  2. Internet Explorer 9
  3. Document rendering in Standards Mode (as opposed to Quirks Mode)

Got it? Good.

Why does it fail?

IE9 on these versions of Windows has the following User Agent (or very similar):

 
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.0; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; MS-RTC LM 8 )
 

The part we're interested in is the Windows versions, "Windows NT 6.0" and "Media Center PC 6.0". Clearly, these are the OS version, not the browser version. Unfortunately, the bgiframe plugin's browser version check is a bit too rudimentary to realize this. Here's the code from the most recent version (June 2007) of this plugin:

 
if ( $.browser.msie && /6.0/.test(navigator.userAgent) ) {
    /* ...other stuff here... */
}
 

This RegEx test looks for the existence of "6.0" anywhere in the UA string. As you saw above, we have "6.0" in there twice, even though I'm using IE9.

So, we need to fix this little flub to make it very specific to our needs:

 
if ( $.browser.msie && parseInt($.browser.version) === 6 ) {
    /* ...other stuff here... */
}
 

In this way, we utilize jQuery's browser version sniffer (which has the added benefit of jQuery upgrades, if the sniffer ever gets updated) and we also ensure that we're targeting IE6 directly, not a random instance of "6.0" from any number of OS's or plugins which add to the UA string. After all, that's what this plugin is designed to do -- fix the IE6 z-index bug.

The other component of this is "Standards Mode" rendering. This bug didn't come to light for me until now because the website I work on renders in Quirks Mode (don't get me started on this!), so the Javascript engine was more forgiving. When in Standards Mode, IE9 yells about this line in the plugin:

 
this.insertBefore( document.createElement(html), this.firstChild );
 

I haven't taken the time to understand why, but it doesn't like "this.insertBefore()" in this use. But, that's for another day.

About the Author

Rob has been in web development for over 10 years, 9 of which have been focused on being a ColdFusion Application Developer. Project Management, eCommerce Consulting, and Marketing Consulting are also in the quiver. If you like what I have to say, consider following me on Twitter or reading more about me here: About Rob O'Brien