jquery - 使用 JQuery 更改 iframe 属性

Question

我需要 iframe 大小拉伸(stretch)到他的容器，但有宽度和高度定义的属性。 所以我想通过javascript来改变它。 这是我的出发点:

   <div class="emvideo emvideo-video emvideo-vimeo">
<div id="media-vimeo-1" class="media-vimeo">
        <iframe src="http://" width="425" height="350" frameborder="0"></iframe>
    </div>
    </div>

和我的 JS 代码:

jQuery(window).on('load', function()
    {
$("#media-vimeo-1 iframe").setAttribute('height: 100%');
 $("#media-vimeo-1 iframe").setAttribute('width: "100%"');
}

但没有任何改变。 谢谢

Answer 1

首先 jQuery 没有 setAttribute()方法;这是attr() 。但是，当您设置 iframe 的高度和宽度时您可以调用height()和width()分别。

另请注意，要在元素上设置 100% 高度，所有父元素必须具有 height应用于它们，我在下面的示例中使用 CSS 完成了这一点:

jQuery(window).on('load', function() {
  $("#media-vimeo-1 iframe").height('100%').width('100%');
});

html,
body,
.emvideo,
#media-vimeo-1 {
  height: 100%
}

iframe { background-color: #CCC; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="emvideo emvideo-video emvideo-vimeo">
  <div id="media-vimeo-1" class="media-vimeo">
    <iframe src="http://" width="425" height="350" frameborder="0"></iframe>
  </div>
</div>