CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Mohan Ram
Mohan Ram

Reputation: 8463

to fit iframe to its content height

        <script language="JavaScript">
        function autoResize(id){
            alert('check');
            var newheight;
            var newwidth;

            if(document.getElementById){
                newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
                newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
            }
            alert(newheight);
            alert(newwidth);
            document.getElementById(id).height= (newheight) + "px";
            document.getElementById(id).width= (newwidth) + "px";
        }
        </script>

HTML:

            <iframe id="faq_iframe" src="http://www.google.com" width="100%" height="200px" scrolling="no" frameborder="0" marginheight="0" onload="javascript: autoResize('faq_iframe');"></iframe>

Question: I am using iframe to display my page. i need to fit iframe to my page height how can i do this.

I had tried above codes

i got this error via firebug

Permission denied for <http://localhost> to get property Window.document from <http://www.google.co.in>.
[Break On This Error] newheight=document.getEleme...tWindow.document.body.scrollHeight;

How to make iframe to fit its height to height of my page given in iframe src

Upvotes: 2

Views: 3445

Answers (5)

Idham Perdameian
Idham Perdameian

Reputation: 2277

Try this, you can change for even when you want. this example use jQuery.

$('#iframe').live('mousemove', function (event) {

var theFrame = $(this, parent.document.body);

this.height($(document.body).height() - 350);
});

Upvotes: 0

thomax
thomax

Reputation: 9649

I've been struggling with this as well. I eventually ended up using postMessage (HTML5). Check out an example here: cross-domain iframe resizer?

Upvotes: 0

Naresh
Naresh

Reputation: 815

function autoResize(id){
   moz=document.getElementById&&!document.all
   mozHeightOffset=20
   document.getElementById(id).height=window.frames[id].document.body.scrollHeight+(moz?mozHeightOffset:0);
}

This code will adjust iframe's height according to it's content. call this function onload of iframe.

Upvotes: 0

Martin Jespersen
Martin Jespersen

Reputation: 26183

In your case you can't.

It is not possible for an iframe with content that lives on one domain, to read any properties, including width and height, on the document it is injected into if this document lives on another domain.

There are several ways to achieve cross domain communication across iframes but it involves the document that the iframe lives in is a willing participant, with active javascript to facilitate it.

Upvotes: 2

ZombieDragon
ZombieDragon

Reputation: 131

You can't retrieve the iframe's height, because of Cross-domain policy. Create server-side proxy for this purpose.

Upvotes: 0

Related Questions