自适应iFrame高度

Question

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

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

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

宽度使用100%看起来没问题，但是高度100%不起作用。有没有什么解决办法？

我应该在哪里以及如何嵌入代码，还有ID的内容。请任何人帮忙解答？

- Ricky

---

你是在父页面还是子页面尝试设置iframe的高度？ - Matt Ball

我不知道。视频在（例如）video.html中，上面的代码在index.html中。index从视频中读取。 - Ricky

Answer 1

您需要使用某种JavaScript来动态调整iframe的高度，如果要使用类似于100％而不是像素值的内容。

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

来自lost-in-code：

{{link1：jQuery：Auto iFrame Height}}

请注意，由于JavaScript安全限制，来自不同域的窗口对象无法从当前域访问，因此此jQuery autoHeight插件将无法与访问来自不同域或远程位置的内容的iFrames一起使用。

- magzalez

Answer 2

如果您不想使用jQuery插件，您可以简单地使用我在Facebook帖子中解释的方法来完成（https://www.facebook.com/antimatterstudios/posts/10151007211674364）

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

很遗憾，IFrame无法获取您加载的内容的高度，除非您设置高度，否则它将显示默认高度或根本没有高度。这很烦人。

我为您提供了解决方案，它仅适用于最近的、标准支持的浏览器，但在IE8中也有效，因此对于大约99%的用户来说是完美的。

唯一的问题是您需要在IFrame内部插入JavaScript，如果您加载的内容属于您，那么这很容易，您只需打开要加载的内容并将JavaScript放入其中即可。

在您的网站上，您需要一段JavaScript代码，可以“从IFrame接收消息”，就像这样：

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

在您的IFrame内容中，最底部添加以下内容。可能只需使用PHP或其他语言编写"$template.$javascript"即可，即使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的大小 :)

我相信你可以找出如何改变细节的方法，但这就是我正在使用的方法。

- Christopher Thomas