跨域iframe的高度自适應

跨子域的iframe高度自适應

完全跨域的iframe高度自适應

1. 父頁面通過iframe的contentDocument或document屬性通路到文檔對象，進而可以取得頁面的高度，通過此高度值指派給iframe tag。

2. 子頁面可以通過parent通路到父頁面裡引入的iframe tag，進而設定其高度。

但跨域的情況則不允許對子頁面或父頁面的文檔進行通路（傳回undefined），是以我們要做的就是打通或間接打通這個壁壘。

比如 'a.jd.com/3.html' 嵌入了 'b.jd.com/4.html'，這種跨子域的頁面

3.html

4.html

可以看到與上一篇對比，隻要在兩個頁面裡都加上document.domain就可以了

分别有以下資源

這四個資源有如下關系

1. A裡嵌入C，A和C是不同域的，即跨域iframe

2. C裡嵌入B，C和B是不同域的，但A和B是同域的

3. C裡嵌入D.js，D.js放在和A同域的項目裡

通過一個間接方式實作，即通過一個隐藏的B.html來實作高度自适應。

A.html

B.html

嵌入在C頁面中，它是隐藏的，通過parent.parent通路到A，再改變A的iframe(C.html)高度，這是最關鍵的，因為A，B是同域的是以可以通路A的文檔對象等。

C.html

嵌入在A中，和A不同域，要實作C的自适應，C多高則A裡的iframe就設為多高。C裡嵌入B.html 和 D.js

　　

D.js

在頁面C載入後計算其高度，然後将計算出的height指派給C裡引入的iframe（B.html）的src