在 IE8 上克隆/附加 Flash 电影的 jQuery 问题答案

【问题标题】：jQuery problem cloning/appending flash movie on IE8在 IE8 上克隆/附加 Flash 电影的 jQuery 问题
【发布时间】：2010-11-16 20:02:46
【问题描述】：

我在使用 jQuery 函数 clone 和 append 切换 div 的内容时遇到问题。

简而言之，我使用两个链接来显示和隐藏 Flash 视频：链接 1 显示视频 1 和隐藏视频 2。 Link2 显示 video2 并隐藏 video1。

这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="inc/jquery/jquery.js"></script>
</head>
<body>
<div class="leftcolumn">
  <div class="videoholder">
    <div id="box1">
      <object width="300" height="225">
        <param name="movie" value="http://www.youtube.com/v/uv9RpD4bbNw?fs=1&amp;hl=en_US&amp;rel=0">
        </param>
        <param name="allowFullScreen" value="true">
        </param>
        <param name="allowscriptaccess" value="always">
        </param>
        <embed src="http://www.youtube.com/v/uv9RpD4bbNw?fs=1&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="225"></embed>
      </object>
      <p> <a href="#" name="box2" class="sele" onclick="return false">View video in Spanish</a></p>
    </div>
    <div id="box2">
      <object width="300" height="225">
        <param name="movie" value="http://www.youtube.com/v/HxBRdJCV8Os&amp;hl=en_US&amp;fs=1?rel=0">
        </param>
        <param name="allowFullScreen" value="true">
        </param>
        <param name="allowscriptaccess" value="always">
        </param>
        <embed src="http://www.youtube.com/v/HxBRdJCV8Os&amp;hl=en_US&amp;fs=1?rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="225"></embed>
      </object>
      <p> <a href="#" name="box1" class="sele" onclick="return false">View video in English</a></p>
    </div>
  </div>
  <script type="text/javascript">

                            $("#box1").show().siblings().hide(); // Default video

                            $(".sele").click(function(){
                                switch(this.name) {
                                        case "box1" : 
                                                var box2 = $("#box2").clone(true);
                                                $("#box2").remove();
                                                $(".videoholder").append(box1);

                                                $(".videoholder").append(box2);
                                                $("#box1").show().siblings().hide(); //

                                                break;
                                        case "box2" : 
                                                var box1 = $("#box1").clone(true);
                                                $("#box1").remove();
                                                $(".videoholder").append(box2);

                                                $(".videoholder").append(box1);
                                                $("#box2").show().siblings().hide(); //

                                                break;
                                }
                            });

</script>
</div>
</body>
</html>

这是我为使其在 IE 中工作所做的最接近的事情。我会更容易使用

    <script type="text/javascript">
    $("#box1").show().siblings().hide(); // Default
    $(".sele").click(function(){
    $("#" + this.name).show().siblings().hide();
    });
</script>

但这在 IE 上不起作用：隐藏的视频一直在播放。

感谢您想分享的所有想法。

最好的祝愿。路易斯

【问题讨论】：

标签： jquery flash video clone append

【解决方案1】：

您需要将 WMODE 设置为 0 或透明。已修复：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="inc/jquery/jquery.js"></script>
</head>
<body>
<div class="leftcolumn">
  <div class="videoholder">
    <div id="box1">
  <object width="300" height="225">
    <param name="movie" value="http://www.youtube.com/v/uv9RpD4bbNw?fs=1&amp;hl=en_US&amp;rel=0">
    </param>
    <param name="allowFullScreen" value="true">
    </param>
    <param name="allowscriptaccess" value="always">
    </param>
    <param name="wmode" value="transparent"></param>
    <embed src="http://www.youtube.com/v/uv9RpD4bbNw?fs=1&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="225" wmode="transparent"></embed>
  </object>
  <p> <a href="#" name="box2" class="sele" onclick="return false">View video in Spanish</a></p>
</div>
<div id="box2">
  <object width="300" height="225">
    <param name="movie" value="http://www.youtube.com/v/HxBRdJCV8Os&amp;hl=en_US&amp;fs=1?rel=0">
    </param>
    <param name="allowFullScreen" value="true">
    </param>
    <param name="allowscriptaccess" value="always">
    </param>
    <param name="wmode" value="transparent"></param>
    <embed src="http://www.youtube.com/v/HxBRdJCV8Os&amp;hl=en_US&amp;fs=1?rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="225" wmode="transparent"></embed>
  </object>
  <p> <a href="#" name="box1" class="sele" onclick="return false">View video in English</a></p>
</div>
</div>
</div>
</body>
</html>

【讨论】：

非常感谢。我会继续玩参数。