iframe高度自适应

前两天在网上看到了一道面试题，问iframe高度自适应的问题。发现自己之前几乎没有关注过iframe的问题，所以在这里记录一下。

原题目是：页面A的域名是：http://www.taobao.com,页面B的域名是http://www.tmall.com，如果A使用iframe引用页面B，如何做到iframe的高度自适应（即B内容有多高，iframe就有多高）

在这里首先分析一下如果不涉及跨域或者只是主域相同，子域不同的情况下的解决方案：

父页面代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8 <iframe id="iframe1" name="iframe1" src="http://www.iframe.com" frameborder="0" style="100%"></iframe>
 9     <script>
10         // document.domain = "iframe.com"; 主域相同，子域不同
11         function setIframe(childrenIF) {
12 
13             // contentWindow 兼容各个浏览器，可取得子窗口的 window 对象。
14             // contentDocument Firefox 支持，> ie8 的ie支持。可取得子窗口的 document 对象。
15             var childrenWin = childrenIF.contentWindow || childrenIF.contentDocument.parentWindow;
16             if (childrenWin.document.body) {
17                 // document.documentElement返回文档对象（document）的根元素（例如，HTML文档的 <html> 元素）。
18                 childrenIF.height = childrenWin.document.documentElement.offsetHeight || childrenWin.document.body.offsetHeight;
19             }
20 
21         }
22         window.onload = function() {
23             setIframe(document.querySelector('#iframe1'));
24         }
25     </script>
26 </body>
27 </html>

看到张鑫旭的博客里说到另一种方法，是在iframe页面传递一个参数给父页面，告知其高度。父页面取到参数后再给iframe高度赋值。

大致原理在子页面iframe里定义

// 为了防止window.location.hash产生跨域问题，可以直接写死hostUrl地址：利用window.top.location = 父页面地址(写死) + 锚点
var hostUrl = window.location.hash.slice(1);
hostUrl += "#height=" + 1294;
window.top.location = hostUrl;

然后将子页面嵌入到父页面中，父页面提取location中的height数值，从而更改iframe高度。

var iframeHeight = function() {    
    var hash = window.location.hash.slice(1);
    if (hash && /height=/.test(hash)) {
        iframe.height = hash.replace("height=", "");
    }
    setTimeout(iframeHeight, 200);
};
iframeHeight();

可以参考：小tip：iframe高度动态自适应

这里思考了一下是不是可以不写死页面的地址：

假设面试题目中提到的页面A:www.taobao.com内部嵌入页面B:www.tmall.com页面，要让B页面高度自适应的解决方案

参考各种资料，可以利用中间代理页面agent.html来完成。

主要原理是agent页面和A页面同源，将agent页面嵌入到B页面获取到B页面宽高后，通过url传递宽高值。通过agent来操作A页面中嵌入的B页面宽高。

1. 在A(taobao)页面嵌入iframe

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

2. 在B(tmall)页面嵌入agent_iframe，获取B页面的宽高。(将获取到的宽高通过url传递)

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

3. 在agent.html插入代码（因为agent和A页面是相同域名，所以可以通过子元素来控制父元素的父元素［因为agent是嵌入在B页面的，B页面嵌入在A页面，因此agent可以控制A页面的元素，此处为多层嵌套，有点绕］的宽高）

<script type="text/javascript">
    var tmall_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";
        tmall_iframe.style.width = hash_width;
        tmall_iframe.style.height = hash_height;
    }
</script>

总结

个人认为，如果父页面的地址是固定的，我觉得直接写死地址是比较方便直观的方法。当然还有很多其他方法可以实现高度自适应。

详见：iframe高度自适应的6个方法