Auto-Fit iFrame Height

问题:

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?

回答1:

You'll have to use some sort of JavaScript to dynamically adjust the height of an iframe if you want to use something like 100% rather than a pixel value.

Unfortunately, my understanding is that you cannot dynamically alter the height of an iframe that is pointing to a different domain than your own.

From lost-in-code:

jQuery : Auto iFrame Height

Please note that this jQuery autoHeight plugin will not work with iFrames accessing content from a different domain or remote location since the window object originating from a different domain cannot be accessed from the current one due to JavaScript security restrictions.

回答2:

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