使用jQuery更改iframe宽度和高度？ [英] Change iframe width and height using jQuery?

问题描述

我尝试过一个在本网站上找到的解决方案。然而，它不适合我。我认为有一个脚本设置这个其他地方，所以我需要在页面中添加一些代码来覆盖风格。

我试过这个：

 < script type =text / javascript> 
 $（document）.ready（function（）{
 $（＃frame1）。width（578）; 
 $（＃frame1）。height（326）; 
}）; 
< / script>但是，html仍然是这样：
 
 
 
 
 
 
 
 
 $ b b 
 < iframe frameborder =0src =http://player.vimeo.com/video/20657168?color=fc030fstyle =width：500px; height ：281.25px;>< / iframe> 
  
我想要 width  c $ c> 578 ， height 为 326 。以下是网站： http://beckindesigns.tumblr.com/  
 
 
 
 PS如果我添加一个类或ID，它从html中剥离它。如果你添加 id =frame1
这将会工作，如果你使用Tumblr .. 
解决方案
 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>


                        
这篇关于使用jQuery更改iframe宽度和高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！