使用 jQuery 更改 iframe 的宽度和高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14913784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change iframe width and height using jQuery?
提问by MikeSmithDev
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:
但是，html仍然是这样的：
<iframe frameborder="0" src="http://player.vimeo.com/video/20657168?color=fc030f" style="width: 500px; height: 281.25px;"></iframe>
I want the widthto be 578and the heightto be 326. Here is the website: http://beckindesigns.tumblr.com/
我想要width成为578和height成为326。这是网站：http: //beckindesigns.tumblr.com/
P.S. If I add a class or ID it strips it from the html. I am using Tumblr..
PS 如果我添加一个类或 ID，它会将它从 html 中删除。我正在使用 Tumblr..
回答by MikeSmithDev
It will work if you add id="frame1"to your iframe.
如果您添加id="frame1"到您的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 Selectorsand ID Selector.
在$("#frame1")将选择id属性的元素frame1。供参考：jQuery 选择器和ID 选择器。
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:
更新：既然你说 ID 被剥离了，你可以改变选择器的工作方式，并将其应用于所有 iFrame：
<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:
如果页面上有多个 iFrame 并且不希望它们的大小相同，则可以使用:eq(index)选择器，它将匹配从零开始的索引。因此，如果页面上有两个 iFrame，并且只想更改第二个，请使用：
<script type="text/javascript">
$(document).ready(function () {
$("iframe:eq(1)").width(678);
$("iframe:eq(1)").height(526);
});
</script>
回答by Raymundo Pizano González
Adjust iframe to window size
将 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>
