如何設定iframe高度自適應在跨域情況下的可用方法_javascript技巧

在頁面上使用iframe來動態載入頁面內容是網頁開發中較常見的方法。在父頁面中給定一個不帶捲軸的iframe，然後對屬性src指定一個可載入的頁面，這樣當父頁面被存取的時候，子頁面可以被自動載入。 iframe的高度需要根據子頁面的實際高度來進行調整。如果iframe的高度小於子頁面的實際高度，超出的部分無法顯示；相反，如果iframe的高度過高，則頁面上會出現大量的空白區域。我們可以透過屬性或CSS來設定iframe的高度，當不確定子頁面內容的高度時，也可以透過腳本來進行動態指定。但是如果子頁面不在同一網域中怎麼辦？這時候腳本沒有辦法取得子頁面的高度，有JavaScript跨域的問題！

如題所述，本文在介紹可用方法的同時，也向大家詢問除下文列出來的方法之外是否還有其它方法可尋？

透過屬性或CSS來設定iframe的高度這裡就不再具體介紹了。首先來看看如何透過腳本進行設定。

複製程式碼 程式碼如下:

function ChangeFrameHeight(id) {count. 1;

(function() {
var frm = document.getElementById(id);
var subWeb = document.frames ? document.frames[id].document : frm.Document; 🎜>
if (subWeb != null) {
var height = Math.max(subWeb.body.scrollHeight, subWeb.documentElement.scrollHeight);
frm.height = height;
}
}
}
}
}
}
}
}
}
}

}
}
}

} } if (count count = count 1; window.setTimeout(arguments.callee, 2000); } })();

}

假設iframe子頁面和父頁都在同一網域內，透過該腳本可以對給定id的iframe高度進行動態調整。為了防止父頁面在子頁面之前載入完成，函數會每隔2秒重新執行一次，總共執行3次。極端情況下子頁面的載入速度會慢於父頁面，可適當地對執行次數和時間做調整。

複製程式碼 代碼如下:

如果遇到子頁面跨域的問題，可透過HTML5的postMessage來實現，但前提是子頁面需要主動向父頁面傳送訊息。下面是子頁部分：




複製程式碼

程式碼如下:

Got post?

Lots of stuff here which will be inside the iframe.