jQuery调整iframe高度

Posted 2023-03-06

【中文标题】jQuery调整iframe高度

【英文标题】：jQuery adjusting iframe height

【发布时间】：2012-08-06 01:58:19

【问题描述】：

此代码已传递给我。它使我的 iframe 设置为屏幕的 100% 高度：

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

我是 javascript 新手。如何编辑此代码以使其设置为 90% 高度而不是 100%？此外，此代码针对所有 iframe，有没有办法使其针对特定 iframe（通过其 ID 或 NAME 值）？如果您愿意，可以在此处修改此代码：http://jsfiddle.net/VurLy/

【参考方案1】：

乘以 90%？

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

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

【讨论】：

你能解释一下你用适当的选择器来$而不是'iframe'是什么意思吗？你能写一个有效的例子吗？请注意，我是编码新手...

@HenrikPetterson：传递将应用于您的元素的 CSS 选择器。例如，$('#some-element') 将选择具有id 的some-element 的元素。

@HenrikPetterson 这是 Jquery 的文档。 （请注意完整的 CSS 选择器规则链接）api.jquery.com/category/selectors

@HenrikPetterson，用于在 id 上进行选择：$('#scoop')。用于选择名称：$('iframe[name="scoop"]')。从你的 jsFiddle 中获取 id 和 name。

【参考方案2】：

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

【讨论】：

这不起作用，我添加了 iframe 的 ID，但它没有对 iframe 做任何事情。

我尝试了您的示例，但没有成功，请自行查看：jsfiddle.net/VurLy/1

当我运行jsfiddle.net/VurLy/1 并单击链接时，它会将 iFrame 加载到 90% 的高度。什么不起作用？

【参考方案3】：

在 jquery 中，您可以通过多种不同方式识别您想要的元素，最流行的是像这样 $('#scoop') 或类这样的 id，像这样 $('.scoop') - 如果类是勺子

这就是您识别所需的特定 iFrame 的方式，然后像这样更改高度

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

【讨论】：

我尝试了您的示例，但没有成功，请自行查看：jsfiddle.net/VurLy/1

您在 html "style= ... > 中设置了高度，这将覆盖任何 css

你真的可以将它设置为 90% 并避免 jQuery 更多地用于动态更改高度，而不仅仅是在 document.ready 上设置它