SWFObject 和调整 Div 大小

发布于 2024-08-14 12:16:28 字数 1582 浏览 4 评论 0原文

我有以下 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>

原文

I have the following HTML code, what I want to do is to split the page into two divs, and place the object to the left side. However, the swf file covers all of the page, not just the left side. What could be the problem?

Thanks,

 <!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凝望流年 2024-08-21 12:16:28

当您在 SWFObject 的 attributes 变量中指定 ID 时，SWFObject 生成的

<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

When you specify an ID in SWFObject's attributes variable, the <object> generated by SWFObject will replace the target div (in this case #left) with an object using the ID you specified (in this case #player). So your CSS for #left won't work, because there is no element with that ID anymore.

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

becomes

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

The solution is to either not specify an ID in the attributes, in which case the object will inherit the ID used by the target div, or change your CSS to recognize that the object uses the ID #player and not #left

回复收藏 0 原文

烂人 2024-08-21 12:16:28

将你的样式更改为这样：

 <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 中的想法）

Change your styles to this:

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

then change your body html to this (so that you are replacing a Div inside your left 'box':

<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>

This worked how I imagined you were thinking in firefox for me anyway

回复收藏 0 原文

べ映画 2024-08-21 12:16:28

SWF 的原始尺寸是多少？我认为百分比是指文件固有尺寸的百分比，而不是容器元素的可用空间。

另一个问题可能是，由于 swf 是一个“对象”，并且对象渲染是由系统完成的，因此它使用视口的尺寸，而不是容器元素。

简而言之，如果您需要它具有动态尺寸，我会计算所需的尺寸。您可以使用 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>

What are the native dimensions of the SWF? I think the percentages refer to the % of the inherant dimensions of the file, not the available space of the container element.

Another, thing might be that since a swf is an "object" and object rendring is done by the system it uses the dimentions of the view port, not the container element.

In short if you need it to have dynamic dimensions i would calulate the dimensions needed. You could do so with jQuery pretty easily:

<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>

回复收藏 0 原文

~没有更多了~