AutoHeight IFrame

Question

I want to make an iframe page loading a page from another site. I tried "jQuery iFrame Sizing" to set the auto height in the iframe ... but that failed.

What is the problem...?

This is my code:

on Head:
<script type="text/javascript" src="js/jquery.js" ></ script >
<script type="text/javascript" src="js/iframe.js"></script >

on Body:
<iframe scrolling="no" frameborder="0" width="1025" src="http://mydomain.com"/>
</iframe>

Answer 1

Yes, due to browser security restrictions. Javascript does not have access to the iframe source loaded from another domain. However, there is a workaround for this, not an ideal one, but it works.

"" , script, mydomain.com. iframe src script. , , .

, :

<iframe scrolling="no" frameborder="0" width="1025" src="http://mydomain.com" />

- :

<iframe scrolling="no" frameborder="0" width="1025" src="/local-script.php?url=http%3A%2F%2Fmydomain.com" />

local- script.php, /, , . LMK, PHP .

Answer 2

, . , Shindig opensocial - . , iframe, , iframe iframe.

shindig svn dynamic-height.js dynamic-height-util.js.

, - .

Answer 3

:

: - , - , iframe,

Answer 4

, :-), ... . FF, Chrome Safari 5.0

$(document).ready(function(){
    $("iframe").load( function () {
        var c = (this.contentWindow || this.contentDocument);
        if (c.document) d = c.document;
        var ih = $(d).outerHeight();
        var iw = $(d).outerWidth();
        $(this).css({
            height: ih,
            width: iw
        });
    });
});

, .

Answer 5

OKay, my solution is to set the iframe to its contents, given that you have cross-access, or if not, you can probably add this header in your php file:

header("Access-Control-Allow-Origin: *");

Thus, the JS code for resizing will be as follows:

function resizeFrame(f) {
     var size = f.contentWindow.frameElement.clientHeight;
     f.style.height = size + "px";              
     }

then call resizeFrame (link id)