前兩天在網上看到了一道面試題，問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="width: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>
總結
個人認為，如果父頁面的地址是固定的，我覺得直接寫死地址是比較方便直觀的方法。當然還有很多其他方法可以實現高度自適應。