Question

我有一个带嵌入视频的简单页面。以下是一个例子。我想检索嵌入视频的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的宽度）仅显示“＆gt;＆lt;”，而不显示视频的宽度。

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

我能做些什么来直接获得宽度？

我不是像jQuery这样的库的忠实粉丝，但很高兴考虑以防其中一个提供直接的解决方案，这不会比仅仅解析标签内的字符串更复杂。以防万一页面需要进行一些维护...

谢谢！

Answer 1

DOM：element.offset *

offsetWidth和offsetHeight应该有所帮助，supported even in IE6 and all modern browsers。

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

请查看the jsFiddle Demo。

jQuery width（）/ height（）

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

属性

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

 alert ( ">" + video.width +  "<" );
 alert ( ">" + video.getAttribute(width) +  "<" );

Answer 2

我认为你只需要设置style属性以匹配你的width和height属性：

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

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

使用javascript检索嵌入视频的宽度

2 个答案:

DOM：element.offset *

jQuery width（）/ height（）

属性