2011-01-12 72 views
4

我创建了一个jQuery插件,当用户滚动时,允许将选定的网页面板固定到浏览器视图端口的顶部在页面上传递特定的水平点之后的长页面。Flash对象在其容器被重新设计时重新启动或消失

当面板固定或取消固定时,会发生一个奇怪的事情:如果Flash SWF对象作为容器的后代元素存在,则Flash对象要么重新开始其动画,要么完全消失。

当CSS属性“位置”在fixed,absolutestatic之间切换时,会发生引脚或未引脚变化。这会强制Firefox重新绘制其元素,并且会导致<object>重新加载和重新生成Flash影片。我有兴趣阅读这篇文章:http://alexw.me/2010/12/firefox-problems-with-javascript-animation/

有没有人知道一种解决方法,防止<object>标记重新加载?我承认Flash是一个广告,但这个问题只发生在Firefox中。虽然有人认为这可能是一个错误,但我已经搜索没有成功,我正在抓紧我的脑袋,最后期限到期。

提前致谢!

彼得

+0

相关问题:http://stackoverflow.com/questions/298342/firefox-restarts-flash-movie-if-enclosing-div-properties-change – 2011-09-09 16:51:25

回答

4

这是在firefox本身就是一个已知的bug ......其实自2001年上市以来他们的Bugzilla报告制度,仍然没有得到修复,并可能不会被它的外观是固定的。

https://bugzilla.mozilla.org/show_bug.cgi?id=90268

+0

绝对是一个史诗错误报告。实际上,截至2011年6月,针对Firefox的手指越过了10个 – markd 2011-10-27 07:32:08

3

我发现最简单的解决方法是在CSS {溢出:隐藏}添加到SWF对象的父。这在我遇到这个问题的两个实例中起作用。

1

我一直在寻找解决方案,以在Firefox中嵌入Flash内容时支持overflow: hidden;属性。所以我有不同的工作。

我在下面的代码,从而避免了在这个问题上面所讨论的问题zIndex财产上播放新的旗帜格“销或钉住发生变化时,CSS属性”。

在我的情况下,我使用的CSS属性overflow:hidden;,我正在切换,在Firefox中导致错误。

看看下面的代码,一个解决方案,为我工作:

<div class="footerbannerbox" style=" background-image:none; position:relative; top:-3px; width:690px; height:90px; margin:0 0 0 64px; padding:0;" id="footerBannerBox" onmouseover="handleFlash();"> 
<div id="new-banner" style="position: absolute; width: 690px; height: 300px; top:-213px; left:-1px;"> 

    <div id="exp-banner" style=" position:absolute;clip: rect(0px 690px 300px 0px);"> 

     <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" name="expandable" width="690" height="300" align="middle" id="expandable"> 

      <param name="allowScriptAccess" value="sameDomain" /> 
      <param name="allowFullScreen" value="false" /> 
      <param name="movie" value="/swf/Unbelievable_JK_RB_690x300.swf" /> 
      <param name="quality" value="high" /> 
      <param name="wmode" value="transparent" /> 
      <param name="bgcolor" value="#fff" /> 
      <param name="menu" value="false" /> 
      <embed src="/swf/Unbelievable_JK_RB_690x300.swf" width="690" height="300" align="middle" quality="high" wmode="transparent" bgcolor="#fff" name="expandable" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" menu="false" /> 
     </object> 

    </div> 

</div> 

<script type="text/javascript"> 

    function expand() { 
     document.getElementById("exp-banner").style.clip="rect(0px 690px 300px 0px)"; 
     document.getElementById("new-banner").style.zIndex = '0'; 
    } 

    function retract() {   
     document.getElementById("exp-banner").style.clip="rect(0px 690px 300px 0px)"; 
     document.getElementById("new-banner").style.zIndex = '-1'; 
    } 

    function handleFlash(){ 
     document.getElementById("new-banner").style.zIndex = '0'; 
    } 
</script> 
</div> 

expand()retract()功能从SWF文件内部调用。

2

在我们的一个webapp中,我们有两个面板,每个面板都包含一个Flash动画。只显示其中一个面板而另一个隐藏。最初,我们在面板上使用了jquery .hide()和.show(),但每次使用Chrome浏览器(21.0)时,一个面板的可见性将从隐藏变为阻止重新启动的Flash动画。

我们尝试了在网络上建议的不同解决方案,但只有一个运行良好:避免更改displayvisibility css属性,并通过更改绝对位置来隐藏面板。

事情是这样的:

<div class="panelContainer"> 
    <div id="panel1"> 
     <object>...flash code here...</object> 
    </div> 
    <div id="panel2" class="active"> 
     <object>...flash code here...</object> 
    </div> 
</div> 
.panelContainer { 
    position: relative; 
} 

.panelContainer > div { 
    position: absolute; 
    top: 0; 
    left: -3999px; 
} 

.panelContainer > div.active { 
    left: 0; 
} 
function showPanel(id) { 
    $('#panelContainer > div.active').removeClass('active'); 
    $('#'+id).addClass('active'); 
} 

showPanel('panel1'); 

奇怪但却真实的,我们有这个问题,只有浏览器,而IE9和Firefox 15名的作品与.hide()和.show()。 我希望它有帮助。