jQuery调整iframe高度

Question

这段代码是传给我的。它可以让我的 iframe 高度自适应屏幕高度：

jQuery(document).ready(function(){var height = $(window).height();
             $('iframe').css('height', height)
         });

我刚开始学习 JavaScript。怎样修改这段代码让它的高度为 90%，而不是 100%？此外，这段代码会作用于所有的 iframe，有没有办法只针对特定的 iframe（通过 ID 或 NAME 值）进行设置？如果你愿意，可以在这里试验一下这段代码：http://jsfiddle.net/VurLy/

- Henrik Petterson

Answer 1

将其乘以90%？

jQuery(document).ready(function() {
    var height = $(window).height();
    $('iframe').css('height', height * 0.9 | 0);
});

至于按ID或名称进行定位，只需将合适的选择器传递给$，而不是'iframe'即可。

- Ry-

---

请问您能否解释一下用适当的选择器替换 'iframe' 为 $ 的含义？您可以给出一个工作示例吗？请注意我是编程新手... - Henrik Petterson

@HenrikPetterson：传递适用于您的元素的CSS选择器。例如，$（'#some-element'）将选择具有id为some-element的元素。 - Ry-

@HenrikPetterson 这是JQuery的文档（注意完整的CSS选择器规则链接）：http://api.jquery.com/category/selectors/ - Daniel Moses

@HenrikPetterson，根据id选择：$('#scoop')。根据名称选择：$('iframe[name="scoop"]')。从您的jsFiddle中获取了id和名称。 - Gromer

Answer 2

jQuery(document).ready(function(){
    $('#YOUR_FRAME_ID_HERE').css('height', '90%')
});​

- mittmemo

---

这个没有起作用，我添加了 iframe 的 ID 但是它对 iframe 没有任何影响。 - Henrik Petterson

我尝试了你的示例，但它没有起作用，随时可以查看：jsfiddle.net/VurLy/1 - Henrik Petterson

当我运行http://jsfiddle.net/VurLy/1/并点击链接时，它会将iFrame加载到高度的90％。有什么问题吗？ - mittmemo

Answer 3

在 jQuery 中，您可以通过许多不同的方式识别要使用的元素，最流行的方式是通过 ID，例如 $('#scoop') 或者通过类名，例如 $('.scoop') - 如果类名是 scoop。

这就是如何识别您想要的特定 iFrame，然后像这样更改高度。

 jQuery(document).ready(function() {
   var height = $(window).height();
   $('#scoop').css('height', '90%'); 
});

- Scott Selby

---

我尝试了你的示例，但它没有起作用，随时可以查看：http://jsfiddle.net/VurLy/1/ - Henrik Petterson

你在 HTML 中设置了高度 "style= ... height="100%">，这将覆盖所有的 CSS。 - Scott Selby

你真的可以将其设置为90％，避免使用jQuery，因为jQuery更适用于动态更改高度，而不仅仅是在document.ready上设置它。 - Scott Selby