使用 bgiFrame（ie6 插件）覆盖不使用 wmode 跨浏览器的 flash 内容答案

【问题标题】：Using bgiFrame (ie6 plugin) to overlay flash content which does not use wmode crossbrowser使用 bgiFrame（ie6 插件）覆盖不使用 wmode 跨浏览器的 flash 内容
【发布时间】：2011-05-03 17:32:03
【问题描述】：

我有一个包含 flash 和菜单的站点，我需要能够用菜单覆盖 flash，但不能使用 wmode:transparent 或 opaque，因为它对性能的影响太大。

我找到了以下插件，它通过使用 iframe 来实现这一点，但这在较新的浏览器中会失效。（似乎在 ie6/7 中开箱即用）

http://plugins.jquery.com/project/bgiframe (Change the z index of flash content)

我在这里找到了 Invalid Character DOM Exception in IE9 的帖子，有人解释了为什么它不起作用，但我无法让它起作用。

原来的插件代码是

$.fn.bgIframe = $.fn.bgiframe = function(s) {
    // This is only for IE6
    if ( $.browser.msie && /6.0/.test(navigator.userAgent) ) {
        s = $.extend({
            top     : 'auto', // auto == .currentStyle.borderTopWidth
            left    : 'auto', // auto == .currentStyle.borderLeftWidth
            width   : 'auto', // auto == offsetWidth
            height  : 'auto', // auto == offsetHeight
            opacity : true,
            src     : 'javascript:false;'
        }, s || {});
        var prop = function(n){return n&&n.constructor==Number?n+'px':n;},
            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 )
                this.insertBefore( document.createElement(html), this.firstChild );
        });
    }
    return this;
};

【问题讨论】：

标签： javascript

【解决方案1】：

最后我设法重写了插件，使内容能够在所有版本的 IE 中覆盖，但在其他浏览器中不是很成功。 Firefox 无需插件即可覆盖内容。

【讨论】：