使用jQuery更改iframe的宽度和高度？

Question

使用jQuery更改iframe的宽度和高度？

14

我尝试了在这个网站上找到的一个解决方案。然而，它对我来说没有起作用。我想可能有一个脚本在别的地方设置了这个，所以我需要在页面中添加一些代码来覆盖样式。

我尝试了这个：

<script type="text/javascript">
    $(document).ready(function () {
        $("#frame1").width(578);
        $("#frame1").height(326);
    });
</script>

然而，HTML仍然会以这种方式显示：

<iframe frameborder="0" src="http://player.vimeo.com/video/20657168?color=fc030f" style="width: 500px; height: 281.25px;"></iframe>

我希望 width 是 578，height 是 326。这是网站：http://beckindesigns.tumblr.com/

附言：如果我添加 class 或 ID，它会从 HTML 中去除。我正在使用 Tumblr。

- user1717480

你的frame1 id在哪里？ - Bhushan Firake

你需要给iframe设置id="frame1"。 - JJJ

Tumblr正在从视频帖子中剥离ID... - user1717480

@tech0925更新了我的答案，展示了如何在没有ID的情况下完成它。 - MikeSmithDev

2个回答

1

调整iframe以适应窗口大小

<iframe frameborder="0" src="http://player.vimeo.com/video/20657168?color=fc030f" style="width: 500px; height: 281.25px;"></iframe>

<script>
    $(document).ready(function(){
       $("iframe").height($(window).height());
       $("iframe").width($(window).width());

       $( window ).resize(function() {
            $("iframe").height($(window).height());
            $("iframe").width($(window).width());
        });
    });
  </script>

- Raymundo Pizano González

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MikeSmithDev · Accepted Answer

如果你给你的iframe添加id="frame1"，它就会起作用。

<iframe frameborder="0" id="frame1" src="http://player.vimeo.com/video/20657168?color=fc030f" style="width: 500px; height: 281.25px;"></iframe>

$("#frame1")将选择具有id属性frame1的元素。参考：jQuery选择器和ID选择器。

更新：由于您说ID被剥离了，您可以更改选择器的工作方式，并将其应用于所有iFrame：

<script type="text/javascript">
    $(document).ready(function () {
        $("iframe").width(678);
        $("iframe").height(526);
    });
</script>

如果您在页面上有多个iFrames，且不想它们具有相同的大小，则可以使用:eq(index)选择器，该选择器会匹配从零开始的索引。因此，如果页面上有两个iFrames，而且只想更改第二个，则使用以下代码：

<script type="text/javascript">
    $(document).ready(function () {
        $("iframe:eq(1)").width(678);
        $("iframe:eq(1)").height(526);
    });
</script>