1. 跨子域的iframe高度自適應
2. 完全跨域的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