http://www.cnblogs.com/snandy/p/3900016.html

  • 跨子域的iframe高度自适应
  • 完全跨域的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高度自适应

分别有以下资源

这四个资源有如下关系

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>
    <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的文档对象等。

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>
    <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

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) {
        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

 

iframe高度宽度自适应(转)的更多相关文章

  1. iframe高度/宽度自适应(使用body而不是docuemntElement对象)

    iframe在ie11中会显示过于短.为了自适应,增加如下代码: <iframe *** onload='changeFrameHeight()' > <script> fun ...

  2. iframe高度宽度自适应

    iframe { width: 100%; height: 100%; border: none; position: inherit; } 网上全是js方法,而且略显臃肿,故找到了一个css方法,宽 ...

  3. iframe 高度宽度自适应

    <iframe id="iframeHome" name="iframeHome" src="/Page/NewHome/GongZuoTai. ...

  4. iframe高度动态自适应

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1294 一.前言碎碎念 ...

  5. ECharts 高度宽度自适应(转载)

    最近在写一个地图类的应用,用的是echarts的图表,然而一上来就一脸懵逼,如果父级容器的height/width属性设置为百分比的形式,那么echarts就会warning,且不能正常的生成图表.所 ...

  6. CSS学习笔记(6)--浮动,三列布局,高度宽度自适应

    百度ife任务三,要求中间宽度自适应,高度取三列最高者. 开始用position的relative和absolute,但是relative不能自适应宽,absolute不能加float浮动,撑不起来外 ...

  7. Ext TabPanel items高度宽度自适应

    写Ext的时候经常会遇到一些莫名其妙,令人感到非常神奇的问题,甚至都没办法用语言去描述它,搞的人想请教一下百度或Google都不知道该去怎么问,简直能够令人发疯.先来看张截图吧. 有没有注意到里面的G ...

  8. 主题:iframe高度的自适应

    在项目开发中,遇到的一个问题.弹出的页面中有iframe.例 <iframe src="www.baidu.html" width="100%" char ...

  9. iframe高度自适应

    前两天在网上看到了一道面试题,问iframe高度自适应的问题.发现自己之前几乎没有关注过iframe的问题,所以在这里记录一下. 原题目是: 页面A的域名是:http://www.taobao.com ...

随机推荐

  1. JS代码风格指南

    一.基本格式 缩进 建议每级4个空格,可以给编辑器设置tab = 4个空格,自动转换 分号 不要省略分号,防止ASI(自动插入分号)错误 行宽 每行代码不超过80个字符,过长应该用操作符手动断行 断行 ...

  2. RabbitMQ(一) -- Hello world

    RabbitMQ -- Hello world RabbitMQ使用AMQP通信协议(AMQP是一个提供统一消息服务的应用层标准协议,基于此协议的客户端与消息中间件可传递消息,并不受客户端/中间件不同 ...

  3. Windows Server 2008R2 配置网络负载平衡(NLB)

    目录 配置环境 安装 安装网络负载平衡 安装Web服务器 IIS 配置 测试 其它 配置环境 VMware:(版本10.0.01) 主集群IP:192.168.220.102 VM1:192.168. ...

  4. 01_JavaScript简介

    js用途 前端三层 结构层 HTML 从主义角度描述页面的结构 样式层 CSS 从审美的角度装饰页面 行为层 JS 从交互角度提升体验 HTML 里面的 b(加粗)/i(倾斜)/u(下划线)等标签由于 ...

  5. chrome浏览器扩展的事件处理

    关于chrome扩展开发的栗子已经有很多了,问问度娘基本能满足你的欲望, 我想说的是扩展和页面间的数据传递问题. 我们知道写扩展有个必须的文件就是“manifest.json”, 这个里面定义了一个和 ...

  6. jQuery页面滚动监听事件及高级效果插件

    jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...

  7. python爬虫抓取数据

    URL管理器实现方式:1. 内存python内存待爬取URL集合:set()已爬取URL集合:set() 2. 关系数据库MySQLurls(url, is_crawled) 3. 缓存数据库(高性能 ...

  8. transform实现的时钟效果

    又来一个时钟效果了,这个的实现不需要canvas,都是div.ul.li画出的,好玩有真实. 哈哈~ 需要的js才能实现到走动这个效果,但js的内容不多,也不难. 主要是一个css里transform ...

  9. echart.js的使用与API

    ---恢复内容开始--- echart.js的使用与API 1.echart.js的使用: 第一步:在head标签或body下创建一个script标签去引用echart.js,(该文件可以在echar ...

  10. PowerShell remoting中的second-hop问题

    一直以来都对powershell remote有点一知半解, 今天通过这个问题的解决, 理解加深了好多.   下文写的挺清楚的, 保留在这里. Using CredSSP for second-hop ...