iframe高度自適應

引言

對於iframe，可能大部人都沒什麼好感吧！在html5中iframe差很少已經廢棄了，但有時候，人在江湖，身不禁己啊。好比兩公司項目合做，A公司(頁面A)要把B公司頁面(頁面B)嵌套到它裏面去，這個就可能會碰到跨域iframe的高度自適應問題。

同域

其實同域的狀況下，咱們是能夠很輕鬆的作到高度自適應的，父頁面能夠經過iframe的
contentDocument或document屬性訪問到文檔對象，進而能夠取得頁面的高度height，而後咱們能夠將此heihgt賦值給iframe tag。一樣，子頁面能夠經過parent訪問到父頁面裏面引入的iframe tag，而後給其設置高度。

跨域

可是對於上面說到的兩公司項目合做的話，因爲存在跨越問題，是不能直接經過js控制，咱們只能經過一箇中間頁面來通訊。
咱們能夠選擇在頁面B裏面再嵌套一個頁面A的同域頁面C，這樣頁面C就能和頁面A進行無障礙的通信了；由於頁面C嵌套頁面B中，因此頁面B就能夠修改頁面C的屬性值。它們以前的關係結構以下圖：
圖片描述

大概原理清楚了，下面開始代碼：

頁面A

頁面B

頁面C