jquery - 如何使用jquery更改div内多个iframe的高度

Question

我在一个 div 中有多个 iframe。每个 iframe 的内容不同，因此每个 iframe 的高度不同。

<div id="multipleIframe">
    <iframe></iframe>
    <iframe></iframe>
    <iframe></iframe>
    <iframe></iframe>
</div>

我正在使用内容轮播在一个 iframe 与另一个 iframe 之间切换。

最初发生的是内容轮播动画在每个 iframe 之间自动切换。然后登陆第一个 iframe。然后用户可以使用轮播导航在 iframe 之间切换。

我正在如下操作 iframe 的高度:

$("#multipleIframe iframe").each(function() {
    var heightIframe;
    heightIframe = $("iframe").contents().height();
    $("iframe").css({
        "height": heightIframe
    });
});

这仅适用于第一个 iframe，其余 iframe 的位置基于已经计算好的第一个。因此使内容被截断。

我希望它在动画期间以及用户尝试使用导航在 iframe 之间切换时工作。

有人解决这个问题吗？

Answer 1

它应该适合您。它可能不起作用的唯一情况是您的代码甚至在加载所有 iframe 之前就已执行。在那种情况下，代码可能只找到第一个 iframe 并设置它的高度。或者，在函数上设置一个计时器并在一定时间间隔后执行它。这是显示此方法的演示:

http://jsfiddle.net/GCu2D/716/

将其更改为:

setTimeout(function () {
    $("#multipleIframe iframe").each(function () {
        var heightIframe;
        heightIframe = $(this).contents().height();
        console.log(heightIframe);
        $(this).css({
            "height": heightIframe + "px"
        });
    })
}, 3000);