跨域iframe的高度自適應

標籤：cPage   高度自適應   style   blog   http   color   java   os   

原文:跨域iframe的高度自適應

 

• 跨子域的iframe高度自適應
• 完全跨域的iframe高度自適應

 

同域的我們可以輕鬆的做到

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

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

 

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

 

一、跨子域的iframe高度自適應

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

3.html

<!DOCTYPE html><html>  <head>    <meta charset=‘utf-8‘ />    <title>1.html</title>    <script type="text/javascript">    document.domain = ‘jd.com‘    </script>  </head>  <body> <iframe id="ifr" src="b.jd.com/4.html" frameborder="0" width="100%"></iframe>  </body></html>

4.html

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>2.html</title>    <script type="text/javascript">    document.domain = ‘jd.com‘    </script>  </head>  <body> <p>這是一個ifrmae，嵌入在3.html裡 </p> <p>根據自身內容調整高度</p> <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><script>// 計算頁面的實際高度，iframe自適應會用到function calcPageHeight(doc) {    var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)    var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)    var height  = Math.max(cHeight, sHeight)    return height}window.onload = function() {var height = calcPageHeight(document)parent.document.getElementById(‘ifr‘).style.height = height + ‘px‘ }</script>  </body></html>

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

 

二、完全跨域的iframe高度自適應

分別有以下資源

• 頁面 A：http://snandy.github.io/lib/iframe/A.html
• 頁面 B：http://snandy.github.io/lib/iframe/B.html
• 頁面 C：http://snandy.jd-app.com
• D.js：http://snandy.github.io/lib/iframe/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

嵌入頁面C: http://snandy.jd-app.com 

<!DOCTYPE html><html>  <head>    <meta charset=‘utf-8‘ />    <title>A.html</title>  </head>  <body><iframe id="ifr" src="http://snandy.jd-app.com" frameborder="0" width="100%"></iframe>  </body></html>

 

B.html

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

<!DOCTYPE html><html>  <head>    <meta charset=‘utf-8‘ />    <title>B.html</title>  </head>  <body>    <script type="text/javascript">        window.onload = function() {            var isSet = false            var inteval = setInterval(function() {                var search = location.search.replace(‘?‘, ‘‘)                if (isSet) {                    clearInterval(inteval)                    return                   }                if (search) {                    var height = search.split(‘=‘)[1]                    var doc = parent.parent.document                    var ifr = doc.getElementById(‘ifr‘)                    ifr.style.height = height + ‘px‘                    isSet = true                }            }, 500)        }    </script>  </body></html>

 

C.html

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

<!doctype html><html><head><title>C.html</title><meta charset="utf-8"></head><body><h3>這是一個很長的頁面，我要做跨域iframe的高度自適應</h3><ul><li>頁面 A：http://snandy.github.io/lib/iframe/A.html</li><li>頁面 B：http://snandy.github.io/lib/iframe/B.html</li><li>頁面 C：http://snandy.jd-app.com</li><li>D.js：http://snandy.github.io/lib/iframe/D.js</li></ul><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><iframe id="myifr" style="display:none" src="http://snandy.github.io/lib/iframe/B.html"></iframe><script type="text/javascript" src="http://snandy.github.io/lib/iframe/D.js"></script></body></html>

　　

D.js

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

// 計算頁面的實際高度，iframe自適應會用到function calcPageHeight(doc) {    var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)    var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)    var height  = Math.max(cHeight, sHeight)    return height}window.onload = function() {    var doc = document    var height = calcPageHeight(doc)    var myifr = doc.getElementById(‘myifr‘)    if (myifr) {        myifr.src = ‘http://snandy.github.io/lib/iframe/B.html?height=‘ + height        // console.log(doc.documentElement.scrollHeight)          }};

　　

線上樣本：http://snandy.github.io/lib/iframe/A.html