自动调整 iFrame 高度

发布于 2024-11-06 14:45:26 字数 396 浏览 0 评论 0原文

现在，我有一个 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 内容。请问有人帮忙吗？

原文

Right now, I have a jQuery UI pop-up dialog that reads from an external page. This page reads from another external that has a video via flowplayer.

I'm using iframe to embed the video in the first:

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

The width seems all right with 100%, but 100% height doesn't work. Is there a way around this?

Where and how do I embed the code, as well as the ID stuff. Please anyone, help?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

假扮的天使 2024-11-13 14:45:26

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

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

来自丢失的代码：

jQuery：自动 iFrame 高度< /p>
请注意，此 jQuery autoHeight 插件不适用于从不同域或远程位置访问内容的 iFrame，因为由于 JavaScript 安全限制，无法从当前域访问源自不同域的窗口对象。

回复收藏 0 原文

空城之時有危險 2024-11-13 14:45:26

如果你不想使用 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 内容中一样，将其添加到最底部，可能只需执行“$template.$javascript”之类的操作就可以了使用PHP或其他东西，即使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 的大小:)

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

if you don't want to use a jquery plugin, you can do it simply using the method I've explained on my facebook post (https://www.facebook.com/antimatterstudios/posts/10151007211674364)

Do you have an IFrame, which you want to automatically set the height of because you're hosting a page from another website in yours.

Well, unfortunately the IFrame cannot take the height of the content you are loading and unless you put a height, it'll show either the default height, or no height at all. This is annoying.

I have the solution for you, it'll only work on recent, standard supporting browsers, but also works in IE8 too, so for about 99% of you it's perfect.

The only problem is you need to insert a javascript inside the iframe, which is easy if the content you are loading belongs to you, you can just open the content you're loading and put the javascript in the content.

In your website, you need a piece of javascript which can "receive a message from the IFrame", like this

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

in your IFrame content, add this at the very bottom, probably it's ok to just do something like "$template.$javascript" using PHP or something, even if the javascript is not inside the tag

<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>

Obviously I am using jquery, you dont have to, it's just easier and probably you are using it, so save yourself the hassle.

if you do that, when the iframe loads, it'll send a signal back to the parent window, which will resize the iframe based on the length of the content :)

I'm sure you can figure out how to alter the little things, but thats the method I'm using

回复收藏 0 原文

~没有更多了~