javascript - 需要从 iframe 中获取 height 属性值并设置父元素以包含它

Question

我将在以后收到一些动态生成的 iframe 内容，并尝试创建一个无论高度如何都能舒适地适应 iframe 的模板。所以我想写一个 jquery 脚本来读取 iframe 中的 height 属性的值，这样我就可以将父元素设置为相应的大小。

我不确定如何访问 iframe 中的 height 属性......我假设最简单的方法是从父元素运行脚本以获取 iframe 高度，然后设置它自己的高度。我也希望 iframe 是同一个域，所以这不会是一个问题。

<div class="parent_element" style="">
<!-- .parent_element {height: } should be set to 400px -->
<iframe src="" height="400"></iframe>
</div

谁能指出我正确的方向？谢谢。

Answer 1

当 iframe src 加载时，调整 iframe 高度以匹配文档（加上一点滚动条）。

$(document).ready( function () {
  $('iframe').load( function() {
    //console.log($(this).contents().height() + ' is the height');
    $(this).height($(this).contents().height() + 25); // add some to the height to allow for horizontal scroll bars
  });
});

Answer 2

$("#parent_element").height($("iframe").height());

或者：

$("#parent_element").height($("iframe").attr("height"));