iframe自适应高度处理

一中方法：

在子页面加载完毕的时候执行

parent.document.getElementById("iframe").height=0;

parent.document.getElementById("iframe").height=document.body.scrollHeight;

另一种：

在主页面 iframe onLoad 时间里面写

function iframeLoad()  
{  
    document.getElementById("iframe").height=0;  
    document.getElementById("iframe").height=document.getElementById("iframe").contentWindow.document.body.scrollHeight;  
}

 

内容宽度变化的iframe高度自适应

1.(兼容不好)

<iframe src="backtop.html" frameborder="0" scrolling="no" id="test" onload="this.height=100"></iframe>
<script type="text/javascript">
function reinitIframe(){
var iframe = document.getElementById("test");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
console.log(height);
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
</script>

 2.(兼容不好)

<iframe src="{{ url('/admins/welcome') }}" frameborder="0" width="100%" id="mainIframe" name="mainIframe" scrolling="no" ></iframe>


<script type="text/javascript">
            function SetCwinHeight(){
                var iframeid=document.getElementById("mainIframe"); //iframe id
                if (document.getElementById){
                    if (iframeid && !window.opera){
                        if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){
                            iframeid.height = iframeid.contentDocument.body.offsetHeight;
                        }else if(iframeid.Document && iframeid.Document.body.scrollHeight){
                            iframeid.height = iframeid.Document.body.scrollHeight;
                        }
                    }
                }
            }

        window.setInterval("SetCwinHeight()", 1000);
</script>

 3.（兼容好些因为是用jquery写的） 终极

<iframe src="{{ url('/admins/welcome') }}" frameborder="0" width="100%" id="mainIframe" name="mainIframe" scrolling="no" >

            </iframe>


    <script src="/static/js/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
            $(document).ready(function(){

            });
            function myfunSetHeight()
            {
                var iframeHeight = $("#mainIframe").contents().find("body").height();
                $("#mainIframe").height(iframeHeight);
            }

        window.setInterval("myfunSetHeight()", 1000);//选下面

window.onload = function () {
    myfunSetHeight();
};

</script>

 

 

跨域下的iframe自适应高度

跨域的时候，由于js的同源策略，父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。

方法如下：假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。

我们使用www.a.com下的另一个页面agent.html来做代理，通过它获取iframe页面的高度，并设定iframe元素的高度。​​·​​

a.html中包含iframe:

<iframe src="http://www.b.com/c.html" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe>

在c.html中加入如下代码：

<iframe id="c_iframe"  height="0" width="0"  src="http://www.a.com/agent.html" style="display:none" ></iframe>
<script type="text/javascript">
(function autoHeight(){
var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight);
var c_iframe = document.getElementById("c_iframe");
c_iframe.src = c_iframe.src + "#" + b_width + "|" + b_height;  // 这里通过hash传递b.htm的宽高
})();
</script>

最后，agent.html中放入一段js:

<script type="text/javascript">
var b_iframe = window.parent.parent.document.getElementById("Iframe");
var hash_url = window.location.hash;
if(hash_url.indexOf("#")>=0){
var hash_width = hash_url.split("#")[1].split("|")[0]+"px";
var hash_height = hash_url.split("#")[1].split("|")[1]+"px";
b_iframe.style.width = hash_width;
b_iframe.style.height = hash_height;
}
</script>

agent.html从URL中获得宽度值和高度值，并设置iframe的高度和宽度（因为agent.html在www.a.com下，所以操作a.html时不受JavaScript的同源限制）

 

 

终极自己写的一个

<script src="/static/js/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
            $(document).ready(function(){

            });
            function myfunSetHeight()
            {
                var iframeHeight = $("#mainIframe").contents().find("body").height();
                $("#mainIframe").height(iframeHeight+120);//多加120个像素
            }

        window.setInterval("myfunSetHeight()", 1000);//选下面

window.onload = function () {
    myfunSetHeight();
};

</script>