原文:跨域iframe的高度自适应跨子域的iframe高度自适应完全跨域的iframe高度自适应
同域的我们可以轻松的做到
1. 父页面通过iframe的contentDocument或document属性访问到文档对象，进而可以取得页面的高度，通过此高度值赋值给iframe tag。
2. 子页面可以通过parent访问到父页面里引入的iframe tag，进而设置其高度。
但跨域的情况则不允许对子页面或父页面的文档进行访问（返回undefined），所以我们要做的就是打通或间接打通这个壁垒。
一、跨子域的iframe高度自适应
比如 '/3.html' 嵌入了 '/4.html'，这种跨子域的页面
3.html
<!DOCTYPE html><html><head><meta charset='utf-8' /><title>1.html</title><script type="text/javascript">document.domain = ''</script></head><body><iframe id="ifr" src="/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 = ''</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-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-
<!DOCTYPE html><html><head><meta charset='utf-8' /><title>A.html</title></head><body><iframe id="ifr" src="http://snandy.jd-" 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 = falsevar inteval = setInterval(function() {var search = location.search.replace('?', '')if (isSet) {clearInterval(inteval)return }if (search) {var height = search.split('=')[1]var doc = parent.parent.documentvar 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-</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 = documentvar 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
