to fit iframe to its content height

Question

        <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

Answer 1

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

Answer 2

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);
});

Answer 3

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.

Answer 4

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

Answer 5

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.