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

4.html

      
                 	 
这是一个ifrmae，嵌入在3.html里 
	 
根据自身内容调整高度
	 
a
a
a
a
a
a
a
a
  

可以看到与对比，只要在两个页面里都加上document.domain就可以了

 

二、完全跨域的iframe高度自适应

分别有以下资源

• 页面 A：
• 页面 B：
• 页面 C：
• 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:

 

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

		
     	
这是一个很长的页面，我要做跨域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
	
     
	
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
		

　　

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)          }};

　　

线上示例：