自动调整 iFrame 高度

Posted 2023-03-06

技术标签:

【中文标题】自动调整 iFrame 高度【英文标题】：Auto-Fit iFrame Height 【发布时间】：2011-08-23 18:37:38 【问题描述】：

现在，我有一个从外部页面读取的 jQuery UI 弹出对话框。此页面通过 flowplayer 从另一个具有视频的外部读取。

我正在使用 iframe 将视频嵌入第一个：

<div id="donkeyVideo">
<iframe id="iframeDonkey"   src="../../../../video/donkey-2009-02-23.html" frameBorder="0"></iframe>
</div>

100% 的宽度似乎没问题，但 100% 的高度不起作用。有没有办法解决这个问题？

我在何处以及如何嵌入代码以及 ID 内容。请任何人帮忙？

【问题讨论】：

您是想从父页面还是从子页面设置 iframe 高度？我不知道。视频在（示例）video.html 中，上面的代码在 index.html 中。索引从视频中读取。 【参考方案1】：

如果您不想使用 jquery 插件，只需使用我在 Facebook 帖子 (https://www.facebook.com/antimatterstudios/posts/10151007211674364) 中解释的方法即可完成

您是否有一个 IFrame，您想自动设置它的高度，因为您正在托管另一个网站的页面。

不幸的是，IFrame 无法获取您正在加载的内容的高度，除非您设置高度，否则它将显示默认高度或根本不显示高度。这很烦人。

我有适合您的解决方案，它只适用于最新的标准支持浏览器，但也适用于 IE8，因此对于大约 99% 的人来说，它是完美的。

唯一的问题是你需要在 iframe 中插入一个 javascript，如果你正在加载的内容属于你，这很容易，你可以打开你正在加载的内容并将 javascript 放入内容中。

在您的网站中，您需要一段可以“从 IFrame 接收消息”的 javascript，如下所示

jQuery(document).ready(function()
    jQuery(window).bind("message",function(e)
        data = e.data || e.originalEvent.data;
        jQuery("iframe.newsletter_view").height(data.height);
    );
);

在您的 IFrame 内容中，将其添加到最底部，即使 javascript 不在标签内，也可以使用 php 或其他方式执行“$template.$javascript”之类的操作

<script type="text/javascript" src="jquery-1.7.1-min.js"></script>
<script type="text/javascript">
$(document).ready(function()
    parent.postMessage(
        height:$(document.body).height()+50+"px"
    ,"*");
);
</script>

显然我使用的是 jquery，你不必这样做，它更容易而且可能你正在使用它，所以省去你自己的麻烦。

如果你这样做，当 iframe 加载时，它会向父窗口发送一个信号，它会根据内容的长度调整 iframe 的大小:)

我相信你可以弄清楚如何改变小东西，但这就是我正在使用的方法

【讨论】：

【参考方案2】：

如果您想使用 100% 而不是像素值，则必须使用某种 JavaScript 来动态调整 iframe 的高度。

不幸的是，我的理解是，您无法动态更改指向与您自己的域不同的域的 iframe 的高度。

来自迷失代码：