Internet Explorer上的Flash覆盖厚盒

Here's my code:

这是我的代码:

I've got a flash slideshow on my page. I've used thickbox for login but when someone clicks on the login, the flash overlays thickbox.

我的页面上有一个flash幻灯片。我使用了thickbox登录,但是当有人点击登录时,flash会覆盖thickbox。

I've managed to solve the problem on Firefox, but nothing seems to work on Internet Explorer.

我已经设法在Firefox上解决了这个问题,但似乎没有什么能在Internet Explorer上运行。

7 个解决方案

#1

You need to use one of the following attributes in order to get Flash to sit "within" the DOM rather than over it.

您需要使用以下属性之一才能使Flash位于DOM内而不是位于DOM内。

wmode=transparent -or- wmode=opaque

wmode = transparent -or- wmode = opaque

Comes with the disadvantage of breaking a number of features.

具有破坏许多功能的缺点。

#2

spender is correct, but he didn't explain it much. wmode is an attribute that gets set in the html when you embed the swf, and it needs to be set to transparent. So if you were using AC_RunActiveContent you'd add "wmode", "transparent" as arguments to the embedding function, or in swfoject you'd add so.addVariable("wmode", "transparent");

消费者是正确的,但他没有解释得太多。 wmode是在嵌入swf时在html中设置的属性,需要将其设置为透明。因此,如果您使用AC_RunActiveContent,您将添加“wmode”,“transparent”作为嵌入函数的参数,或者在swfoject中添加so.addVariable(“wmode”,“transparent”);

#3

I had the same problem with the following flash object:

我对以下flash对象有同样的问题:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="690" height="400" id="tech" align="middle">
          <param name="allowScriptAccess" value="sameDomain" />
          <param name="movie" value="banner/banner.swf?xml_path=banner/slides.xml" />
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <embed src="banner/banner.swf?xml_path=banner/slides.xml" quality="high" width="690" height="400" name="tech" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"  />                                                             

        </object>

Note the line <param name="wmode" value="opaque" /> That's the key to make it work.

注意这一行是使它工作的关键。

Hope it helps you.

希望它能帮到你。

Bye

#4

in the thickbox.js file you can use this:

在thickbox.js文件中,您可以使用:

seach for the tb_show function and add this at the end of the "try" before the "catch":

搜索tb_show函数并在“catch”之前的“try”结尾处添加:

$('object').each(function(){ this.regDisplay=this.style.display; this.style.display='none'; })

$('object')。each(function(){this.regDisplay = this.style.display; this.style.display ='none';})

and

$('#TB_window object').each(function(){ this.style.display=this.regDisplay; })

$('#TB_window object')。each(function(){this.style.display = this.regDisplay;})

search for the tb_remove function, and add this before the return:

搜索tb_remove函数,并在返回之前添加:

$('object').each(function(){ this.style.display=this.regDisplay; })

$('object')。each(function(){this.style.display = this.regDisplay;})

#5

The answer of Trey works pretty well for all flash items on page.

Trey的答案非常适合页面上的所有flash项目。

The code for the tb_remove function

tb_remove函数的代码

$('object').each(function(){ this.style.display=this.regDisplay; })

should be placed inside

应放在里面

j("#TB_window").fadeOut("fast",function(){
...
});

This way it only appears after the fadeout and not instantly...

这种方式只会在淡出之后出现,而不会立即出现......

#6

ok, after 2 days of searching the web for the answer i've found a pure JS function that fix it in all browsers!

好吧,经过2天在网上搜索答案后,我发现了一个纯JS功能,可以在所有浏览器中修复它!

there you go:

你去吧:

function fix_flash() {
    // loop through every embed tag on the site
    var embeds = document.getElementsByTagName('embed');
    for (i = 0; i < embeds.length; i++) {
        embed = embeds[i];
        var new_embed;
        // everything but Firefox & Konqueror
        if (embed.outerHTML) {
            var html = embed.outerHTML;
            // replace an existing wmode parameter
            if (html.match(/wmode\s*=\s*('|")[a-zA-Z]+('|")/i))
                new_embed = html.replace(/wmode\s*=\s*('|")window('|")/i, "wmode='transparent'");
            // add a new wmode parameter
            else
                new_embed = html.replace(/<embed\s/i, "<embed wmode='transparent' ");
            // replace the old embed object with the fixed version
            embed.insertAdjacentHTML('beforeBegin', new_embed);
            embed.parentNode.removeChild(embed);
        } else {
            // cloneNode is buggy in some versions of Safari & Opera, but works fine in FF
            new_embed = embed.cloneNode(true);
            if (!new_embed.getAttribute('wmode') || new_embed.getAttribute('wmode').toLowerCase() == 'window')
                new_embed.setAttribute('wmode', 'transparent');
            embed.parentNode.replaceChild(new_embed, embed);
        }
    }
    // loop through every object tag on the site
    var objects = document.getElementsByTagName('object');
    for (i = 0; i < objects.length; i++) {
        object = objects[i];
        var new_object;
        // object is an IE specific tag so we can use outerHTML here
        if (object.outerHTML) {
            var html = object.outerHTML;
            // replace an existing wmode parameter
            if (html.match(/<param\s+name\s*=\s*('|")wmode('|")\s+value\s*=\s*('|")[a-zA-Z]+('|")\s*\/?\>/i))
                new_object = html.replace(/<param\s+name\s*=\s*('|")wmode('|")\s+value\s*=\s*('|")window('|")\s*\/?\>/i, "<param name='wmode' value='transparent' />");
            // add a new wmode parameter
            else
                new_object = html.replace(/<\/object\>/i, "<param name='wmode' value='transparent' />\n</object>");
            // loop through each of the param tags
            var children = object.childNodes;
            for (j = 0; j < children.length; j++) {
                try {
                    if (children[j] != null) {
                        var theName = children[j].getAttribute('name');
                        if (theName != null && theName.match(/flashvars/i)) {
                            new_object = new_object.replace(/<param\s+name\s*=\s*('|")flashvars('|")\s+value\s*=\s*('|")[^'"]*('|")\s*\/?\>/i, "<param name='flashvars' value='" + children[j].getAttribute('value') + "' />");
                        }
                    }
                }
                catch (err) {
                }
            }
            // replace the old embed object with the fixed versiony
            object.insertAdjacentHTML('beforeBegin', new_object);
            object.parentNode.removeChild(object);
        }
    }
}

now you can just run in when the page loads with jQuery:

现在你可以在用jQuery加载页面时运行:

 $(document).ready(function () {
            fix_flash();    
 }

#7

SIMPLE WAY TO DO IT. Tested only on IE9 and FIREFOX.

简单的方法。仅在IE9和FIREFOX上测试过。

Mani's Solution

Wrap your flash content in a div

将您的Flash内容包装在div中

Add to your object tag

添加到您的对象标记

Set wmode="transparent" in the embed tag

在embed标记中设置wmode =“transparent”

Use css to set the position and z-index for your div (don't set negative z-index values as it will make your flash disappear)

使用css设置div的位置和z-index(不要设置负z-index值,因为它会使你的flash消失)

The CSS

#flash {
position: relative; /*or absolute*/
z-index: 0;
}

The XHTML

<div id="flash">
<object ...>
  <param name="wmode" value="transparent">
  <embed ... wmode="transparent">
</object>
</div>

And, in Mani's words... That's It!

并且,用Mani的话来说......就是这样!

#1