使用JavaScript

Question

我有一个Tumblr主题，启用了响应式设计，并希望调整视频iframe的大小。以下是页面HTML的外观示例：

/* rest of blog */
<div id="box-content">
    /* other posts; may contain more video posts */
    <div class="post video">
        <iframe src="[REDACTED]"
                style="display:block;background-color:transparent;overflow:hidden"
                class="embed_iframe tumblr_video_iframe"
                scrolling="no" frameborder="0"
                data-can-gutter="" data-can-resize=""
                data-width="500" data-height="500"
                width="500" height="500" allowfullscreen=""
                mozallowfullscreen="" webkitallowfullscreen="">
        </iframe>
        <div class="post-content">
            /* post content */
        </div>
    </div>
    /* other posts; may contain more video posts */
</div>
/* rest of blog */

我有这个功能（我认为;我从未真正学过JavaScript）在iframe中存储iframe的原始宽度和高度，以及父项的宽度，并更改iframe的宽度和高度。

我想要的方法是

1. 获取课程＆＃34;视频＆＃34;
的所有元素

2. 每个人都有一个子iframe元素。将以下各项存储在其变量中：

   一个。那个iframe的原始宽度（ow），  湾那个iframe的原始高度（哦），和  C。父元素的宽度（容器宽度为cw）

3. 将iframe的宽度设置为cw。

4. 将iframe的高度设置为oh * cw / ow。 （说明：cw / ow计算比例因子以维持iframe的纵横比。）
5. 加载时运行一次该功能。
6. 为窗口调整大小设置事件侦听器。

......并且没有工作的功能是：

function resizeVideos() {
    var videoPostNodeList = document.getElementsByClassName("video");
    for (var i = 0; i < videoPostNodeList.length; i++) {
        var videoNode = videoPostNodelist[i].getElementsByTagName("iframe")[0];
        var ow = videoNode.offsetWidth;
        var oh = videoNode.offsetHeight;
        var cw = videoPostNodelist[i].offsetWidth;
        videoNode.offsetWidth = cw;
        videoNode.offsetHeight = oh * cw / ow;

    }
}
resizeVideos();
window.addEventListener("resize", resizeVideos);

此主题的当前版本可在testing-html.tumblr.com获得，我目前有三个视频：一个方形视频，一个水平宽屏视频和一个垂直宽屏视频。我用这个做了什么业余错误？

Answer 1

1. 元素的offsetWidth和offsetHeight是对可见内容的衡量，包括元素的边框，填充，滚动条（如果存在＆amp;渲染）和CSS宽度
   您还有其他选择，例如clientWidth和clientHeight
   
   和scrollWidth以及scrollHeight（遗憾的是MDN上没有良好的形象）

   根据您对所需内容的说明，我建议您应根据ow和oh属性设置scrollWidth和scrollHeight。

2. 所有这些属性都是只读，因此您无法直接设置它们。

3. 如果我理解正确的情况，最好的选择可能是设置元素max-width和max-height CSS属性（尽管您可能更喜欢直接覆盖width和height）：

   function resizeVideos() {
       var videoPostNodeList = document.getElementsByClassName("video");
       for (var i = 0; i < videoPostNodeList.length; i++) {
           var videoNode = videoPostNodelist[i].getElementsByTagName("iframe")[0];
           var ow = videoNode.scrollWidth;
           var oh = videoNode.scrollHeight;
           var cw = videoPostNodelist[i].offsetWidth;
           videoNode.style.maxWidth = cw;
           videoNode.style.maxHeight = oh * cw / ow;
       }
   }
   

4. 最后，等到内容加载后再运行它（和之前一样，在窗口调整大小时运行它）：

   document.addEventListener("DOMContentLoaded", resizeVideos);
   window.addEventListener("resize", resizeVideos);
   

有关详细信息，请参阅MDN上的Determining the dimensions of elements。