Question

现在，我有一个从外部页面读取的jQuery UI弹出对话框。此页面通过流动播放器从另一个有视频的外部设备上读取。

我正在使用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内容。请有人帮忙吗？

Answer 1

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

不幸的是，我的理解是你不能动态地改变指向与你自己不同的域的iframe的高度。

来自丢失的代码：

jQuery : Auto iFrame Height

请注意，此jQuery autoHeight插件无法与iFrame访问来自其他域或远程位置的内容，因为由于JavaScript安全限制，无法从当前窗口对象访问来自其他域的窗口对象。

Answer 2

如果你不想使用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内容中，在最底部添加，可能只需使用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的大小：）

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

自动调整iFrame高度

2 个答案: