且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

使用jQuery更改iframe宽度和高度?

更新时间:2022-11-15 11:29:32

code>到您的 iframe

 < iframe frameborder =0id =frame1src =http://player.vimeo.com/video/20657168?color=fc030fstyle =width:500px; height:281.25px;>< / iframe> 

$(#frame1)将选择id属性 frame1 的元素。供参考: jQuery选择器 ID选择器



更新:由于您说ID已被删除,您只需更改selector适用于所有iFrames:

 < 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 ).height(526);
});
< / script>


I have tried a solution that I found on this website. However, it did not work for me. I am thinking there is a script that is setting this somewhere else so I need to add some code in the page to overide the style.

I tried this:

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

However, the html still comes out like this:

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

I want the width to be 578 and the height to be 326. Here is the website: http://beckindesigns.tumblr.com/

P.S. If I add a class or ID it strips it from the html. I am using Tumblr..

It will work if you add id="frame1" to your iframe.

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

The $("#frame1") will select the element with the id attribute frame1. For reference: jQuery Selectors and ID Selector.

Update: Since you said that the ID is getting stripped out, you can just change how the selector is working, and apply it to all iFrames:

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

If you have multiple iFrames on page and you don't want them to be the same size, you can use the :eq(index) selector, which will match on the zero-based index. So if you have two iFrames on the page, and only want to change the second, use:

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