Flash overlays thickbox on Internet Explorer

|▌冷眼眸甩不掉的悲伤 提交于 2019-12-06 15:06:49

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

wmode=transparent -or- wmode=opaque

Comes with the disadvantage of breaking a number of features.

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");

I had the same problem with the following flash object:

<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

in the thickbox.js file you can use this:

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

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

and

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

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

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

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

The code for the tb_remove function

$('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...

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

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:

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

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

Mani's Solution

  1. Wrap your flash content in a div
  2. Add to your object tag
  3. Set wmode="transparent" in the embed tag
  4. 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)

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!

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!