Solve highly adaptive iframe content in each case

JS highly adaptive, in fact, set the height of the iframe to be equal to the height of the embedded web page, so do not see a scroll bar and nesting marks. For user experience and website aesthetics play an important role.
If the content is fixed, then we can give it directly defined by a CSS height, the same can achieve the above requirements. When the content is unknown or changes in time. This time there are several situation.

iframe content is unknown, highly predictable

This time, we can add a default CSS min-height value to it, and then use javascript to change the height. Code compatible with commonly used are:

// document.domain = "caibaojian.com";
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};

window.onload = function () {
setIframeHeight(document.getElementById('external-frame'));
};

<iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>

A case where a plurality of iframe

<script language="javascript">
    //输入你希望根据页面高度自动调整高度的iframe的名称的列表
    // 用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。
    // 定义iframe的ID var iframeids=["test"]; //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏
    var iframehide = "yes";
    function dyniframesize() {
        var dyniframe = new Array()
        for (i = 0; i < iframeids.length; i++) {
            if (document.getElementById) { //自动调整iframe高度
                dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
                if (dyniframe[i] && !window.opera) {
                    dyniframe[i].style.display = "block";
                    if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape
                        dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight; else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE
                        dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
                }
            } //根据设定的参数来处理不支持iframe的浏览器的显示问题
            if ((document.all || document.getElementById) && iframehide == "no") {
                var tempobj = document.all ? document.all[iframeids[i]] : document.getElementById(iframeids[i]);
                tempobj.style.display = "block";
            }
        }
    }
    if (window.addEventListener) window.addEventListener("load", dyniframesize, false); else if (window.attachEvent) window.attachEvent("onload", dyniframesize); else window.onload = dyniframesize;
</script>

ID calls to know the iframe

function iframeAutoFit(iframeObj) {
        setTimeout(function () {
            if (!iframeObj) return;
            iframeObj.height = (iframeObj.Document ? iframeObj.Document.body.scrollHeight : iframeObj.contentDocument.body.offsetHeight);
        }, 200)
    }

Content adaptive variable width height iframe

<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>

the height of the cross-domain adaptive iframe

Cross-domain, because of the same-origin policy js, js within the parent page can not get to the height of the iframe page. We need a proxy to do the page.

As follows: Suppose a page under a.html www.a.com to include a page c.html under www.b.com. We use another page agent.html under www.a.com do agents get the height of the iframe page through it, and set the height of the iframe element.
a.html contains iframe:

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

Add the following code 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>

Finally, agent.html placed some 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 width and height values ​​obtained from the URL, and setting the height and width iframe (because agent.html at www.a.com, so that the operation is not a.html JavaScript homologous limit)