CODEWITHSUNDEEP
jqueryheight
Karthik
Karthik

Reputation: 317

AutoHeight IFrame

i want to make a iframe page that loading a page from other site. I have try "jQuery iFrame Sizing" to set auto height in iframe... but it is failed.

What's 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>

Upvotes: 3

Views: 4051

Answers (5)

Miguel Q
Miguel Q

Reputation: 3628

OKay my solution to set the iframe to its contents, considering you have cross access, or if not, you could maybe in your php file add this header:

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

So the JS code to make the resize would be this one:

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

then call resizeFrame(id reference)

Upvotes: 0

ddlab
ddlab

Reputation: 930

may be a bit late, as all the other answers are older :-) but... here´s my solution. Tested in actual FF, Chrome and 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
        });
    });
});

Hope this will help anybody.

Upvotes: 0

user186994
user186994

Reputation:

Yes, due to browsers security limitations Javascript doesn't have the access to iframe's source that is loaded from a another domain. However there is a workaround for that, not ideal, but it works.

You can "outsmart" the browser using a simple local script that will load and output contents of mydomain.com. Then point the iframe src to this script. In that case browser will think you're dealing with the same domain and limitations won't apply.

So instead of this:

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

You may try something like this:

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

Then you can add a simple logic into local-script.php that loads contents of domain/document you want and everything should be fine. LMK, if you need an example of PHP script.

Upvotes: 4

Alex Bagnolini
Alex Bagnolini

Reputation: 22422

First two lines from original site:

Note: Due to browser security limitations related to cross-site scripting, this solution works only for iframe page content called from the same domain

Upvotes: 0

madlep
madlep

Reputation: 49796

It's possible, but not straight forward. I know that the Shindig opensocial container does something similar. Gadgets hosted in an iframe can request that the container dynamically resizes the iframe in response to changes in the gadget content inside the iframe.

The code for handling this lives in the shindig svn repo at dynamic-height.js and dynamic-height-util.js.

Hopefully you can extract something usable from there.

Upvotes: 1

Related Questions