1

我有一个带有嵌入式视频的简单页面。下面是一个例子。我想检索嵌入视频的 iframe 的宽度，该宽度可能会有所不同（例如，如果视频来自 youtube 或 vimeo ）。然后我可以在它旁边放一个 div 和一些文本，并相应地调整后者的宽度

<html>
  <head>
  </head>
      <body onLoad = "resizeElements()">
    <iframe width="420" height="315" src="http://www.youtube.com/embed/a34QTcpnKww"     frameborder="0" allowfullscreen>
    </iframe>  
  </body>
    <script language="JavaScript" type="text/javascript">
    function resizeElements() 
    {
      var iframeVideos = document.getElementsByTagName("iframe");
      for ( var i = 0; i < iframeVideos.length; i++) 
      {
        video = iframeVideos[i];
        alert ( ">" + video.style.width+ "<" );
        video.style.width = "112px";
        video.style.height = "63px";
        alert ( ">" + video.style.width+ "<" );
      }
    }
  </script>
</html>

页面已加载，第一个警报（应具有 iframe 的宽度）仅显示“><”，中间没有视频的宽度。

我确信这不是因为视频对象为空。以下几行按预期调整它的大小。调整大小后，相同的警报会显示正确的宽度。

我能做些什么来立即获得宽度吗？

我不是 jQuery 等库的忠实拥护者，但很高兴考虑其中一个提供直接解决方案的情况，该解决方案不会使其比仅解析标签内的字符串更复杂。以防万一该页面将来需要一些维护......

谢谢！

4

2 回答 2

1

DOM: element.offset*

offsetWidth和offsetHeight应该有所帮助，甚至在 IE6 和所有现代浏览器中都支持。

alert ( ">" + video.offsetWidth +  "<" );

请看一下jsFiddle 演示。

jQuery 宽度（）/高度（）

如果您准备好使用jQuery，请查看.width()和height(). 我也不是 jQuery 的“粉丝”，但是如果您厌倦了解决浏览器的不一致问题，需要高级事件处理支持（而不是您当前的内联事件处理程序）和出色的 DOM 助手，那么它是一个了不起的工具。

属性

另一种方法是简单地检索 HTML 属性的内容（being width="420"）。您可以使用.getAttribute(width)or .width（访问 DOM 属性）来执行此操作。

 alert ( ">" + video.width +  "<" );
 alert ( ">" + video.getAttribute(width) +  "<" );
于 2012-06-06T20:19:56.850 回答
1

我认为您只需要设置样式属性以匹配您的宽度和高度属性：

<iframe style="width:420;height:315" width="420" height="315" src="http://www.youtube.com/embed/a34QTcpnKww"     frameborder="0" allowfullscreen>
    </iframe>

因为在您的函数中，您正在使用 style 属性。

于 2012-06-06T20:20:08.707 回答