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

【问题标题】：Change iframe width and height using jQuery?使用 jQuery 更改 iframe 的宽度和高度？
【发布时间】：2013-02-01 13:18:26
【问题描述】：

我尝试了在此网站上找到的解决方案。但是，它对我不起作用。我在想有一个脚本在其他地方设置这个，所以我需要在页面中添加一些代码来覆盖样式。

我试过了：

<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/

附：如果我添加一个类或 ID，它会从 html 中删除它。我正在使用 Tumblr..

【问题讨论】：

你的 frame1 id 在哪里？
你需要给 iframe id="frame1".
Tumblr 正在从视频帖子中删除 ID...
@tech0925 更新了我的答案以展示如何在没有 ID 的情况下进行操作。

标签： jquery css iframe

【解决方案1】：

如果您将id="frame1" 添加到您的iframe，它将起作用。

<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 Selectors 和 ID Selector。

更新：既然您说 ID 被剥离，您只需更改选择器的工作方式，并将其应用于所有 iFrame：

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

如果页面上有多个 iFrame，并且您不希望它们大小相同，则可以使用 :eq(index) 选择器，它将匹配从零开始的索引。因此，如果您在页面上有两个 iFrame，并且只想更改第二个，请使用：

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

【讨论】：

感谢您的建议。我都试过了，我的html一直输出相同的:(<iframe frameborder="0" src="http://player.vimeo.com/video/20657168?color=fc030f" style="width: 500px; height: 281.25px;">
是的 - HTML 中呈现的输出与 jQuery 设置的值不匹配......但 iframe 的大小将是正确的。 jQuery 正在改变 iframe 的大小，但它不会改变你在“查看源代码”时看到的实际 HTML。
您可以在 Chrome 中“检查元素”而不是“查看源代码”，您应该会看到正确的值，这仍然与提供给客户端的初始 HTML 不同。
好的，我明白你现在在说什么了。但是，iframe 中的 inline style="" 的 b/c 保持旧大小并且不会扩展。
我找到了解决办法。微博太可怕了！如果我发布文本帖子然后只包含 iframe，我可以使用 id 而不是发布视频帖子。好吧，那会起作用的:) LOL

【解决方案2】：

将 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>

【讨论】：