一、跨子域的iframe高度自适应
比如 'a.jd.com/3.html' 嵌入了 'b.jd.com/4.html'，这种跨子域的页面
3.html
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <!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
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!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://localhost:9001/A.html
- 页面 B：http://localhost:9001/B.html
- 页面 C：http://t.com:9001/C.html
大关系就是 A->C->B ，A与B同域名，B作为中间人，用地址栏传参形式，把C的高传出来
这四个资源有如下关系
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:
A.html
B.html
嵌入在C页面中，它是隐藏的，通过parent.parent访问到A，再改变A的iframe(C.html)高度，这是最关键的，因为A，B是同域的所以可以访问A的文档对象等。
B.html
C.html
嵌入在A中，和A不同域，要实现C的自适应，C多高则A里的iframe就设为多高。C里嵌入B.html
C.html 这是一个很长的页面，我要做跨域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