SWFObject和Resizing Div

时间:2009-12-11 03:37:42

标签: swfobject

我有以下HTML代码,我想要做的是将页面拆分为两个div,并将对象放在左侧。但是,swf文件覆盖了所有页面,而不仅仅是左侧。可能是什么问题?

谢谢,

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="language" content="en" />
 <meta name="description" content="" />
 <meta name="keywords" content="" />

 <script src="js/swfobject.js" type="text/javascript"></script>
 <script type="text/javascript">
  var flashvars = {
  };
  var params = {
   menu: "false",
   scale: "noScale",
   allowFullscreen: "true",
   allowScriptAccess: "always",
   bgcolor: "#FFFFFF"
  };
  var attributes = {
   id:"player"
  };

  swfobject.embedSWF("player.swf", "left", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);

 </script>
 <style>
   html, body { height:100%; width:100%; }
   body  { margin:0; padding:0;  }
   #left {
    float: left;
    width: 50%;
   }

   #right { 
    float: right;
    width: 50%;
   }
 </style>
</head>
<body>
<div id="container" >
<div id="left">

  <p><a href="http://www.adobe.com/go/getflashplayer"><img 
   src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" 
   alt="Get Adobe Flash player" /></a></p>
</div>
<div id="right">Test</div>
</div>
</body>
</html>

3 个答案:

答案 0 :(得分:2)

当您在SWFObject的attributes变量中指定ID时,SWFObject生成的<object>将使用您指定的ID替换目标div(在本例中为#left)在这种情况下#player)。因此,#left的CSS不起作用,因为不再有具有该ID的元素。

<div class="box">
   <div id="left">
      <p> ... </p>
   </div>
</div>

变为

<div class="box">
   <object id="player" ... >
      <param ... />
   </object>
</div>

解决方案是不在属性中指定ID,在这种情况下,对象将继承目标div使用的ID,或者更改CSS以识别对象使用ID #player而不是#left

答案 1 :(得分:1)

将您的样式更改为:

 <style type="text/css">
   html, body { height:100%; width:100%; }
   body  { margin:0; padding:0;  }
   .box {
        float:left;
        width:50%;
    }
 </style>

然后将你的身体html更改为此(这样你就可以替换左边'框'内的Div:

<div id="container" >

<div class="box">

    <div id="left">
        <p>
            <a href="http://www.adobe.com/go/getflashplayer">
            <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
            </a>
        </p>
   </div>

</div>

<div class="box">
    Test
</div>

</div>

无论如何,这就是我想象你在firefox中的想法

答案 2 :(得分:0)

SWF的原生尺寸是多少?我认为百分比是指文件的inherant维度的百分比,而不是容器元素的可用空间。

另一件事,可能是因为swf是一个“对象”而对象rendring是由系统完成的,它使用视口的尺寸,而不是容器元素。

简而言之,如果您需要它具有动态尺寸,我会计算所需的尺寸。你可以很容易地用jQuery做到这一点:

<script src="js/swfobject.js" type="text/javascript"></script>
 <script type="text/javascript">
  var left = $('#left');


  var flashvars = {
  };
  var params = {
   menu: "false",
   scale: "noScale",
   allowFullscreen: "true",
   allowScriptAccess: "always",
   bgcolor: "#FFFFFF"
  };
  var attributes = {
   id:"player"
  };

  swfobject.embedSWF("player.swf", "left", ceil(left.width())+'px', ceil(left.height())+'px', "9.0.0", "expressInstall.swf", flashvars, params, attributes);

 </script>