javascript - 使 iframe 适合其内容高度

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>

问题:我正在使用 iframe 来显示我的页面。我需要使 iframe 适合我的页面高度，我该怎么做。

我试过上面的代码

我通过 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; 

如何使 iframe 的高度适合我在 iframe src 中给出的页面的高度

Answer 1

在你的情况下你不能。

如果内容位于一个域中，则 iframe 无法读取它所注入(inject)的文档的任何属性，包括宽度和高度，如果该文档位于另一个域中的话。

There are several ways to achieve cross domain communication across iframes但它涉及 iframe 所在的文档是一个自愿的参与者，有活跃的 javascript 来促进它。