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。因此将内容截断。

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

有没有人能解决这个问题？

Answer 1

它应该适合你。唯一可能无效的情况是代码在加载所有iframe之前执行。在这种情况下，代码可能只找到第一个iframe并设置它的高度。或者，在函数上设置一个计时器，并在一定的时间间隔后执行它。以下是演示此方法的演示：

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

将其更改为：

Output: It was a troll that emerged from the shadows.

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

1 个答案: