CODEWITHSUNDEEP
htmlcssflashiframevisibility
natlee75
natlee75

Reputation: 5197

Unable to hide a Flash SWF object embedded in an iframe

On my HTML page, I have <div> with an <iframe>, which references another page, that contains a Flash SWF object. If I set any of these:

display:none;
visibility:hidden;
opacity:0;
filter:alpha(opacity=0);

on the <div> that wraps the <iframe>, the SWF object sometimes remains in plain sight, while the <div>and <iframe> go out of view as expected.

The weird thing is that it really works sometimes, depending on the SWF object I use.

The expected effect occurs in all the latest browsers on my Mac and all on my Windows 7 machine except for Safari.

EDIT

Here is some example code that illustrates the issue:

<button id="tryit" type="button">Try It</button>
<div id="test">
    <iframe src="hideswf-iframe.html" width="770" height="610" frameborder="0"></iframe>
</div>
<script type="text/javascript">
    var test = document.getElementById("test"),
        tryit = document.getElementById("tryit");

    tryit.addEventListener( "click", hideAndSeek, false );

    function hideAndSeek(e) {
        var style = test.style;
        style.opacity = (style.opacity == 1 || style.opacity == "") ? 0 : 1;
    }
</script>

and a sample SWF object as the guinea pig:

<object type="application/x-shockwave-flash" id="strobemediaplayback" data="StrobeMediaPlayback.swf" width="743" height="600" style="visibility: visible; ">
    <param name="allowFullScreen" value="true">
    <param name="wmode" value="direct">
    <param name="flashvars" value="favorFlashOverHtml5Video=true&amp;swf=StrobeMediaPlayback.swf&amp;javascriptCallbackFunction=$.fn.strobemediaplayback.triggerHandler&amp;minimumFlashPlayerVersion=10.0.0&amp;expressInstallSwfUrl=expressInstall.swf&amp;autoPlay=false&amp;loop=false&amp;controlBarMode=docked&amp;poster=&amp;src=http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.mp4&amp;useHTML5=false&amp;width=1187&amp;height=959&amp;queryString=favorFlashOverHtml5Video=true&amp;swf=StrobeMediaPlayback.swf&amp;javascriptCallbackFunction=$.fn.strobemediaplayback.triggerHandler&amp;minimumFlashPlayerVersion=10.0.0&amp;expressInstallSwfUrl=expressInstall.swf&amp;autoPlay=false&amp;loop=false&amp;controlBarMode=docked&amp;poster=&amp;src=http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.mp4&amp;useHTML5=false&amp;width=1187&amp;height=959">
</object>

which would exist in a file hideswf-iframe.html.

This should work in the latest versions of Safari, Chrome and Firefox on a Mac and in the latest versions of Chrome, Firefox and Internet Explorer on a Windows 7 machine, and it should fail (no errors but the hiding behavior doesn't occur) in Safari on a Windows 7 machine.

It might be pertinent to note that one thing I've noticed about the SWF objects that have passed and failed are that the ones that have failed all revolve around video content whereas the ones that have passed don't. Granted I haven't tested more than a half-dozen objects, but that's quite a coincidence. :)

Upvotes: 0

Views: 3427

Answers (3)

James Dullat
James Dullat

Reputation: 67

simply add this line of JavaScript to your page:

 swfobject.switchOffAutoHideShow();

Upvotes: 0

irao
irao

Reputation: 11

have been trying to resolve this issue as well, didn't find any documentation from safari, tried all possible combinations of css and jquery hiding, it doesn't work for those who are skeptical can, check out http://css-tricks.com/examples/AnythingSlider/ on safari and go through the slides, you'll see the bug in the 3d slide.

Upvotes: 1

Siwei
Siwei

Reputation: 21557

if your case is: 

<div id="main">
  <iframe>
    <object.../>
  </iframe>
</div>

I suggest you use jQuery("#main").toggle(), which works pretty well in my experience.

Upvotes: 0

Related Questions