如何在我想要隐藏的 div 中覆盖 Flash 插件的“始终显示”属性？答案

【问题标题】：How to override the "always show" attribute of a flash plugin in my wannabe-hidden div?如何在我想要隐藏的 div 中覆盖 Flash 插件的“始终显示”属性？
【发布时间】：2010-11-12 03:08:00
【问题描述】：

我有一个 Flash 对象，我试图将其与隐藏的 div 的其余部分一起显示和隐藏。没有 flash 对象，隐藏的 div 效果很好。当页面加载时，这种样式会隐藏 div：

<style>
div {display:none;}
p {display:none;}
div p {display:none;}
</style>

但是当我添加 flash 对象时，它总是会出现。

<div id="hidden1">
  <p id="audioplayer_1">Alternative content</p>
  <script type="text/javascript">
    AudioPlayer.embed("audioplayer_1", {soundFile: "http://yoursite.com/path/to/mp3_file.mp3"});  
  </script>
</div>

flash 对象是Wordpress Audio Player，它带有自己的 Javascript 文件，这似乎会导致播放器对象替换具有诸如“audioplayer_1”之类的 id 的元素，如下面的安装示例（来自播放器的文档） .

除了样式之外，我是否需要一些关于文档加载的 JQuery 代码来尝试覆盖播放器对象的“始终显示”字符？如果是这样，我需要定位什么事件？

   1. <html>  
   2.     <head>  
   3.         <title>Your website</title>  
   4.   
   5.         ...  
   6.   
   7.         <script type="text/javascript" src="path/to/audio-player.js"></script>  
   8.         <script type="text/javascript">  
   9.             AudioPlayer.setup("http://yoursite.com/path/to/player.swf", {  
  10.                 width: 290  
  11.             });  
  12.         </script>  
  13.   
  14.     </head>  
  15.     <body>  
  16.   
  17.         <p id="audioplayer_1">Alternative content</p>  
  18.         <script type="text/javascript">  
  19.         AudioPlayer.embed("audioplayer_1", {soundFile: "http://yoursite.com/path/to/mp3_file.mp3"});  
  20.         </script>  
  21.   
  22.         <p id="audioplayer_2">Alternative content</p>  
  23.         <script type="text/javascript">  
  24.         AudioPlayer.embed("audioplayer_2", {soundFile: "http://yoursite.com/path/to/mp3_file_2.mp3"});  
  25.         </script>  
  26.   
  27.     </body>  
  28. </html>

【问题讨论】：

标签： javascript jquery css flash visibility

【解决方案1】：

我已经使用swfobject 解决了这样的问题。解决方案是在显示 div 之前不调用 embed() 方法。因此，例如，如果您使用 jQuery，您的 HTML 可能如下所示：

<a href="#audioplayer_1">Play 1</a>
<div id="hidden1">
  <p id="audioplayer_1">Alternative content</p>
</div>

对于 jQuery 来说是这样的：

$('a').click(function(
    target = $(this).attr('href');
    $('p'+target).parent().show(); // show the div
    AudioPlayer.embed("audioplayer_1", {soundFile: "mp3_file.mp3"}); // load the audio player
));

【讨论】：

我喜欢这个主意。但这只是它“展示”的一面。要“隐藏”，你如何“解嵌”？
$('p'+target).empty();应该这样做。它将删除innerHTML。

【解决方案2】：

首先，您粘贴的演示代码没有隐藏 div 中的音频播放器。你确定它们实际上在隐藏元素中吗？

如果玩家仍然坚持显示，你可以将他们隐藏在 document.ready 事件中：

<html>
    <head>  
        <title>Your website</title>  

        ...  

        <script type="text/javascript" src="path/to/audio-player.js"></script>  
        <script type="text/javascript">  
            AudioPlayer.setup("http://yoursite.com/path/to/player.swf", {  
                width: 290  
            });

            $(document).ready(function() {
                $('.hidden object').hide();
                $('.hidden').hide();
            });
        </script>  

    </head> 
    <body> 

      <div class="hidden">
        <p id="audioplayer_1">Alternative content</p>  
        <script type="text/javascript">  
        AudioPlayer.embed("audioplayer_1", {soundFile: "http://yoursite.com/path/to/mp3_file.mp3"});  
        </script>  
      </div>

      <div class="hidden">
        <p id="audioplayer_2">Alternative content</p>  
        <script type="text/javascript">  
        AudioPlayer.embed("audioplayer_2", {soundFile: "http://yoursite.com/path/to/mp3_file_2.mp3"});  
        </script>  
      </div>
    </body>  
</html>

尚未测试代码 - 如果它不起作用，请告诉我。

【讨论】：