javascript - react - vue iframe高度




以适应iframe的内容高度 (4)

在你的情况下,你不能。

对于内容位于一个域中的iframe,如果此文档位于另一个域中,则无法读取注入到其中的文档的任何属性(包括宽度和高度)。

有几种方法可以实现跨iframe的跨域通信,但涉及到iframe所在的文档是一个愿意参与的人,并且使用主动javascript来实现。

        <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到我的页面高度,我怎么能做到这一点。

我曾经尝试过以上的代码

我通过萤火虫得到这个错误

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中给出的页面高度


由于跨域策略,您无法检索iframe的高度。 为此创建服务器端代理。


试试这个,即使你想要,也可以改变。 这个例子使用jQuery。

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

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

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


我也一直在努力。 我最终结束了使用postMessage(HTML5)。 看看这里的例子: 跨域iframe调整?







iframe