使用jQuery更改iframe的宽度和高度?(Change iframe width and he

2019-07-20 00:31发布

我已经尝试了解决方案,我这个网站上找到。 但是,它并没有为我工作。 我想有是设置此别的地方,所以我需要在页面中添加一些代码在此改变风格的脚本。

我尝试这样做:

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

我想要的width578height326 。 这里是网站: http://beckindesigns.tumblr.com/

PS如果我添加一个类或ID它从HTML剥离它。 我使用的tumblr ..

Answer 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选择和ID选择器 。

更新:既然你说的那个ID是越来越剥离出来,你可以改变的选择是如何工作的,并适用于所有的iFrame:

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

如果你有页面上多个iframe,你不希望他们是相同的大小,你可以使用:EQ(指数)选择,这将匹配的从零开始的索引。 所以,如果你有两个页面上的iFrame中,只有想改变第二,使用:

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


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


文章来源: Change iframe width and height using jQuery?