跨域iframe高度計算

一、同域獲取iframe內容

 

這里有兩個細節：

1. 取iframe內的文檔對象，標准瀏覽器使用 contentDocument屬性，IE低版本(IE6,7,8)使用 document屬性。

2. calcPageHeight函數計算頁面的實際高度，標准瀏覽器使用document.documentElement，低版本IE使用document.body，默認取clientHeight，出現滾動條的取scrollHeight，最后取兩個值中最大的。

二、跨域獲取iframe高度

1、主域一致，子域不同

比如’a.alitrip.com/a.html’和’b.alitrip.com/b.html’兩個跨子域頁面

a.html

b.html

 

2、主域、子域均不相同

分別有以下資源

頁面A : a.alitrip.com/a.html 

頁面 B：a.alitrip.com/b.html 

頁面 C：dev.taobao.com/c.html 

D.js：a.alitrip.com/d.js 

 

這四個資源有如下關系

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

 

三、頁面100%自適應

<iframe name="ifr" id="ifr" src="http://www.alitrip.com/" style="overflow-y: scroll;width: 100%;height: 100%;"></iframe>

 

四、postMessage數據通信，通過監聽window的message事件接收消息

postMessage(data,origin)方法接受兩個參數

data:要傳遞的數據。

origin：字符串參數，指明目標窗口的源，協議+主機+端口號[+URL]，URL會被忽略，所以可以不寫，這個參數是為了安全考慮，postMessage()方法只會將message傳遞給指定窗口，當然如果願意也可以建參數設置為"*"，這樣可以傳遞給任意窗口，如果要指定和當前窗口同源的話設置為"/"。

MessageEvent的幾個重要屬性

1. data：傳遞來的message
2. source：發送消息的窗口對象
3. origin：發送消息窗口的源（協議+主機+端口號)