iframe的高度自适应
http://www.cnblogs.com/snandy/p/3902337.html
http://www.cnblogs.com/snandy/p/3900016.html
Snandy
Stop, thinking is the essence of progress.
同域iframe的高度自适应
- 引子
- 父页面里控制子页面
- 子页面里控制父页面
一、引子
我们先看一个示例,有两个页面,1.html通过iframe嵌入2.html,两个页面都是同域的
1.html
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html> <html> <head> <meta charset= 'utf-8' /> <title>1.html</title> </head> <body> <iframe id= "ifr" src= "2.html" frameborder= "0" width= "100%" ></iframe> </body> </html> |
2.html,很多P元素将高度撑高一些
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html> <html> <head> <meta charset= "utf-8" > <title>2.html</title> </head> <body> <p>这是一个ifrmae,嵌入在http: //snandy.github.io/lib/iframe/1.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> </body> </html> |
此时,浏览器访问1.html,效果如图
可以看到,嵌入的iframe出现了滚动条,需求是不想出现滚动条,页面多高就显示多少。我们不能随便给iframe设个高度,因为你不知道嵌入的iframe会有多高(内容是动态生成的)。
二、解决方法
解决方法其实很简单,无非是给1.html里的iframe设个高度,高度的值即为2.html的内容高度。要注意的是2.html的内容高度需要页面完全载入(onload)后获取。
有两种方式
A. JS代码写在父页面,即父页面(1.html)里获取子页面(2.html)文档对象,当iframe载入后(load)获取高度,将此高度值赋值给iframe标签
开始测试时使用iframe的contentWindow的load事件,但所有浏览器均不执行。最后使用iframe的load事件,在父页面1.html底部加入如下JS代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<script type= "text/javascript" > // 计算页面的实际高度,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 } var ifr = document.getElementById( 'ifr' ) ifr.onload = function () { var iDoc = ifr.contentDocument || ifr.document var height = calcPageHeight(iDoc) ifr.style.height = height + 'px' } </script> |
这里有两个细节:
1. 取iframe内的文档对象,标准浏览器使用contentDocument属性,IE低版本(IE6,7,8)使用document属性。
2. calcPageHeight函数计算页面的实际高度,标准浏览器使用document.documentElement,低版本IE使用document.body,默认取clientHeight,出现滚动条的取scrollHeight,最后取两个值中最大的。
B. JS代码写在子页面,即子页面在window load后计算高度,将此高度值赋值给父页面的iframe
在子页面(2.html)底部加入如下代码
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<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> |
通过这两种方式都可以实现iframe的高度自适应,可以看到重新设置iframe的高度后,其滚动条都去掉了。
线上示例:http://snandy.github.io/lib/iframe/1.html
相关:
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-78799536
http://msdn.microsoft.com/en-us/library/ie/cc196985(v=vs.85).aspx
Snandy
Stop, thinking is the essence of progress.
跨域iframe的高度自适应
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
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://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
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html> <html> <head> <meta charset= 'utf-8' /> <title>A.html</title> </head> <body> </body> </html> |
B.html
嵌入在C页面中,它是隐藏的,通过parent.parent访问到A,再改变A的iframe(C.html)高度,这是最关键的,因为A,B是同域的所以可以访问A的文档对象等。
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>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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!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> </body> </html> |
D.js
在页面C载入后计算其高度,然后将计算出的height赋值给C里引入的iframe(B.html)的src
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// 计算页面的实际高度,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) { // console.log(doc.documentElement.scrollHeight) } }; |
iframe的高度自适应的更多相关文章
- 跨域iframe的高度自适应
If you cannot hear the sound of the genuine in you, you will all of your life spend your days on the ...
- 同域iframe的高度自适应
引子 父页面里控制子页面 子页面里控制父页面 一.引子 我们先看一个示例,有两个页面,1.html通过iframe嵌入2.html,两个页面都是同域的 1.html <!DOCTYPE html ...
- JQuery iframe宽高度自适应浏览器窗口大小的解决方法
iframe宽高度自适应浏览器窗口大小的解决方法 by:授客 QQ:1033553122 1. 测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com ...
- 让动态的 iframe 内容高度自适应
使用iframe加载其他页面的时候,需要自适应iframe的高度 这里加载了两个不同内容高度的页面至iframe中 1. 没有设置高度 <div class="iframe-wrapp ...
- 实现iframe窗口高度自适应的又一个巧妙思路
domainA 中有一个页面index.html,通过iframe嵌套了domainB中的一个页面other.html由于other.html页面在iframe中显示,而且其页面内容会动态的增加或减少 ...
- js获取iframe和父级之间元素,方法、属,获取iframe的高度自适应iframe高度
摘自:http://blog.csdn.net/kongjiea/article/details/38870399 1.在父页面 获取iframe子页面的元素 (在同域的情况下 且在http://下测 ...
- Jquery-处理iframe的高度自适应
超级简单的方法,也不用写什么判断浏览器高度.宽度啥的.下面的两种方法自选其一就行了.一个是放在和iframe同页面的,一个是放在test.html页面的.注意别放错地方了哦. iframe代码,注意要 ...
- 关于iframe的高度自适应问题(js)
function SetCwinHeight() { var cwin=document.getElementById("cwin"); if (document.getEleme ...
- iframe高度自适应
前两天在网上看到了一道面试题,问iframe高度自适应的问题.发现自己之前几乎没有关注过iframe的问题,所以在这里记录一下. 原题目是: 页面A的域名是:http://www.taobao.com ...
随机推荐
- Filestream复制视频文件
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...
- iOS开发 利用Reachability判断网络环境
导入头文件:#import "Reachability.h" 然后将 SystemConfiguration.framework 添加进工程: 1.检查当前的网络状态(wifi.W ...
- 浅谈HTTP协议(上)
今天讨论一下HTTP协议.一个做前端的,如果连HTTP协议都不了解,那实在是太不合格了. 首先,什么是HTTP?Hyper Text Transfer Protocol(超文本传输协议),用在浏览器和 ...
- 动态内存分配导致Javascript性能的问题
内存分配对性能的影响是很大的,分配内存本身需要时间,垃圾回收器回收内存也需要时间,所以应该尽量避免在堆里分配内存.不过直到最近优化HoLa cantk时,我才深刻的体会到内存分配对性能的影响,其中有一 ...
- src与href
href是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接. src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置:在请求src资源时会将其指向的 ...
- 51nod 1412 AVL树的种类(dp)
题目链接:51nod 1412 AVL树的种类 开始做的时候把深度开得过小了结果一直WA,是我天真了.. #include<cstdio> #include<cstring> ...
- 安卓使用pull解析器解析XML文件
学习一下: public class MainActivity extends Activity { List<City> cityList; @Override protected vo ...
- .htaccess应该放在哪里?
根据 Apache 官方的介绍,.htaccess 文件属于分布式配置文件,可以放置在网站 www 根目录的所有子目录.以及 www 根目录的上一级目录中,生效的路径总是当前目录及其所有子目录(可在文 ...
- hdoj 5003
题意:给你一个数组a,降序排序后,求sum+=0.95^(i-1)*ai 这题wa了两发,因为我没看清题意,要排序! 精度上面通过a^(i-1)=e^((i-1)*log(a)) 提到精度,就要想到底 ...
- 在Web.config或App.config中的添加自定义配置
.Net中的System.Configuration命名空间为我们在web.config或者app.config中自定义配置提供了完美的支持.最近看到一些项目中还在自定义xml文件做程序的配置,所以忍 ...