brandonaaron / bgiframe Goto Github PK

I created a StackOverflow question about this: http://stackoverflow.com/questions/10125340/bgiframe-superfish-and-silverlight-objects

Hi,

if one has an User-Agent string like this

Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET CLR 3.0.04506; .NET CLR 3.5.21022; SLCC1; .NET CLR 1.1.4322; InfoPath.3)

bgiframe thinks it is IE6 because "Media Center PC 6.0" contains "6.0".

A simple fix has been posted here:
http://blog.robobrien.com/ie9-jquery-bgiframe/

$.browser.msie && parseInt($.browser.version) === 6

There are even more related posts confirming this bug:
http://stackoverflow.com/questions/5344029/invalid-character-dom-exception-in-ie9
http://plugins.jquery.com/content/bgiframe-fnbgiframe-fails-ie9
http://plugins.jquery.com/content/ie9-do-not-include-excanvascompiledjs-nor-jquerybgiframeminjs

On the first sight it does not seem to be IE9 related only, but I havent touched this bug with IE < 9 yet.

It would be great if you could add this fix to the next release of bgiframe.

Many thanks in advance
Andreas

The current bgiframe plugin works great with IE6, however it's locked to IE6 and the IFRAME hack is still required in IE7 when dealing with Java applets (z-index issues w/jQuery modals, etc.)

The best solution would simply be to add an override to the plugin options that allows the user to force the IFRAME hack on regardless of browser version, and then fall back to IE6 only if that property is not set.

after updating the bgiframe.js from v2.1.1 to v2.1.3-pre, I found the svg object will be on the top for v2.1.3-pre, it was not happen on v2.1.1

Hello!

So Bgiframe is a huge lifesaver - we have bused it to tackle the IE pdf issue with our css dropdown menus. However, we have run into an issue - our css menus have a max height, and once that height is filled, it begins to use a scrollbar within the menu (think the Facebook notifications). bgiframe does an excellent job making sure that the menus themselves appear in front of the PDFs in IE, but the scrollbars in the menus do not - they and they alone are still hidden. We have inspected the elements to make sure that the menus and the bgiframe are the same, correct width, and they are - but the scrollbar is still hidden. This might be a bgiframe issue or an IE rendering issue, not sure. Nowhere - and I mean nowhere - have we been able to find anyone else with this kind of problem. Any thoughts from you would be greatly appreciated!

On IE9, i get the error DOM Exception: INVALID_CHARACTER_ERR (5) On line :
this.insertBefore( document.createElement(html), this.firstChild );

To solve the problem, i write these lines :

$.fn.bgIframe = $.fn.bgiframe = function(s) {
var html = '';
var isIE9 = /MSIE 9.0/.test(navigator.userAgent);
...
var prop = function(n){return n&&n.constructor==Number?n+'px':n;};
if( isIE9 )
{
html = document.createElement("iframe");
html.setAttribute("src", s.src);
html.setAttribute("class", "bgiframe");
html.setAttribute("frameborder", "0");
html.setAttribute("tabindex", "-1");
var style = 'display:block;position:absolute;z-index:-1;';
style += (s.opacity !== false?'filter:Alpha(Opacity='0');':'');
style += 'top:'+(s.top=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)-1)+'px')':prop(s.top))+';';
style += 'left:'+(s.left=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)-1)+'px')':prop(s.left))+';';
style += 'width:'+(s.width=='auto'?'expression(this.parentNode.offsetWidth+'px')':prop(s.width))+';';
style += 'height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+'px')':prop(s.height))+';';
html.setAttribute("style",style);
}
else
{
html = '<iframe class="bgiframe" frameborder="0" tabindex="-1" src="'+s.src+'"'+
'style="display:block;position:absolute;z-index:-1;'+
(s.opacity !== false?'filter:Alpha(Opacity='0');':'')+
'top:'+(s.top=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)-1)+'px')':prop(s.top))+';'+
'left:'+(s.left=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)-1)+'px')':prop(s.left))+';'+
'width:'+(s.width=='auto'?'expression(this.parentNode.offsetWidth+'px')':prop(s.width))+';'+
'height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+'px')':prop(s.height))+';'+
'"/>';
}

    return this.each(function() {
        if ( $('> iframe.bgiframe', this).length == 0) { //alert(this.firstChild);
            if( isIE9 )
                this.insertBefore( html, this.firstChild ); 
            else
                this.insertBefore( document.createElement(html), this.firstChild );
        }
    });
}
return this;

};

Looks like IE browsers take exception to the syntax:

Message: Expected ';'
Line: 30
Char: 37

Is there any demonstration of this working somewhere? I know there's a test file included, but this also does not work in IE6 or really any browser for me. Could you provide a public link to demonstrate (or show in my jsfiddle)?

Trying here: http://jsfiddle.net/ajkochanowicz/5Q3Xq/30/

In the 3.0.0 section, 4th bullet: "Supoprts" instead of "Supports" ;)