Using jQuery bgiframe.js with IE9

If you think Internet Explorer’s legendary z-index issues are history with the release of their first “proper” standards compliant version – IE9. Think again.

Recently I worked on a project requiring the need to embed PDF documents into the browser utilising the <object> tag and a drop down menu as the main navigation. As usual, the drop down menu and <object> tag played nicely with each other in all browsers except good old IE.

Without much need of investigation – I knew the cause of the issue (Internet Explorer z-index issue) and being a regular user of jQuery. I turned to the old trusted jQuery plugin: jQuery bgiframe.js (http://brandonaaron.net/code/bgiframe/docs) by Brandon Aaron for the fix.

Unfortunately it wasn’t another one of those straight forward fixes – where it was just plug ‘n’ play. Because with the release of IE7, Microsoft had addressed the z-index issue and all versions after version 7 (including version 7). The z-index issue was no longer existent – it was history. So the script is no longer maintained/updated to support newer versions of IE.

However, this z-index issue was not completely resolved, only resolved for “most” use cases and because the script continued to function/worked fine for IE versions 7 and 8. There was no need for a new solution/update of the script.

But unfortunately the script seized to function in IE9 – throwing the exception “Invalid Character DOM”.

This issue has risen due to IE9 being more “standards compliant” – you can find the fix and read more about this exception in this stackoverflow post (http://stackoverflow.com/questions/5344029/invalid-character-dom-exception-in-ie9).

But being a perfectionist. I prefer a slightly more elegant solution than the solution provided in the stackoverflow post. I like to use best practices and utilise the latest version of the scripts and most recent techniques at the time of encountering the problem. So here is my solution to the problem (contains two parts):

Part 1: Modify the following lines in the file jquery.bgiframe.js (version 2.1.2 or 2.1.3-pre) :-

From:

$.fn.bgiframe = ($.browser.msie && /msie 6\.0/i.test(navigator.userAgent) ? function(s) {

To:

// remove browser detection - should use Conditional IF statements instead
$.fn.bgiframe = function(s) { 

From:

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

To:

$(this).prepend($(html)); // resolves DOM exception in IE9 & works fine in IE6/7/8

From:

} : function() { return this; });

To:

}; // no longer need the extra function

Part 2: Adding the jquery.bgiframe.js script to the page :-

<!--[if lte IE 9 ]> <!-- use conditional IF statements rather than browser detection via JS -->
    <script type="text/javascript" src="{path to file}/jquery.bgiframe.js"></script>
    <script>
        if(typeof jQuery !== ';undefined';){
            (function ($, undefined) {
                $(function () {                 
                    $(';#menu ul li div';).bgiframe();
                }); 
            })(jQuery);
        }
    </script>   
<![endif]-->

Leave a Reply

Your email address will not be published. Required fields are marked *