欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

跨域iframe的高度自适应

星期六, 2017-10-07 18:53 — adminshiping1
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高度自适应

分别有以下资源

这四个资源有如下关系

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的高度自适应
» 下一篇：Tip和菜单的实现方式

posted on 2014-08-12 07:35 snandy 阅读(22434) 评论(24) 编辑 收藏

 

评论

#1楼 2014-08-12 08:43 芬奇  

 

推荐+1
支持(0)反对(0)
  

 

#2楼 2014-08-12 09:10 方方和圆圆  

 

受教了，原来是这样的，干货啊
支持(0)反对(1)
  

 

#3楼 2014-08-12 09:59 bjhhh  

 

不太理解为什么要搞得这么复杂。
用样式表实现啦——

<style type="text/css">
body{background:#f00;}
body, html,#ifm1{width:100%;height:100%;overflow:hidden;margin:0;}
#ifm1{width:100%;height:100%;overflow:hidden;margin:0;}
</style>
<iframe id="ifm1" src='http://www.csdn.net' frameborder='no' scrolling='auto'></iframe>
支持(1)反对(2)
  

 

#4楼 2014-08-12 10:16 龙恩0707  

 

iframe跨越 请看这里 http://www.cnblogs.com/tugenhua0707/p/3346522.html
支持(1)反对(0)
  

 

#5楼 2014-08-12 10:33 冲杀  

 

我觉得你不一定非要用参数，可以试试用 #height-100-width-100的方式这样还不用重新刷新页面。
支持(0)反对(0)
  

 

#6楼[楼主] 2014-08-12 11:54 snandy  

 

@ bjhhh
纯css实现，好方法，多谢。
但这种方式只适合纯iframe，当页头页尾有内容时就不行了。
支持(0)反对(0)
  

 

#7楼 2014-08-12 13:37 烈火寒冰  

 

mark
支持(0)反对(0)
  

 

#8楼 2014-08-12 15:18 [*王东*]  

 

mark
支持(0)反对(0)
  

 

#9楼 2014-08-12 15:36 Tear Y  

 

2个网站都是可以自控制的话postMessage，window.name不是很好吗
支持(0)反对(0)
  

 

#10楼 2014-08-12 17:05 sprintf  

 

mark 之
支持(0)反对(0)
  

 

#11楼 2014-08-12 18:26 细品人生  

 

不错，收藏
支持(0)反对(0)
  

 

#12楼[楼主] 2014-08-12 21:55 snandy  

 

@ 冲杀
有道理。
支持(0)反对(0)
  

 

#13楼 2014-08-12 22:19 Tinkerc  

 

mark一下.
支持(0)反对(0)
  

 

#14楼 2014-11-03 15:41 icelin  

 

C页面不是自己的页面，比如C页面是百度的页面，怎么在里边加代码啊，怎么实现跨域高度自适应啊
支持(2)反对(0)
  

 

#15楼 2014-12-27 23:27 MissJacker  

 

MARK
支持(0)反对(0)
  

 

#16楼 2015-06-03 10:01 jiangjunzhang  

 

线上实例挂了，提示“无法解析服务器的 DNS 地址”
支持(0)反对(0)
  

 

#17楼[楼主] 2015-06-04 15:42 snandy  

 

@ jiangjunzhang
已修复，切换到新浪云
支持(0)反对(0)
  

 

#18楼 2015-07-27 17:26 woowyl  

 

楼主，如果iframe里放得是外部网站，如法加自己的js怎么处理呢
支持(0)反对(0)
  

 

#19楼 2015-07-27 17:36 woowyl  

 

无法添加自己的js
支持(0)反对(0)
  

 

#20楼 2015-11-10 11:18 jay-lee  

 

前提两个域都是自己的代码才行，如果另一个域是外部的无法修改的代码，怎么跨越？
支持(0)反对(0)
  

 

#21楼 2016-04-06 10:35 南宫千寻  

 

奇技淫巧，我服了
利用了URL可以向下传递信息，同域可以传递信息，好赞！！
支持(0)反对(0)
  

 

#22楼 2016-04-28 11:13 shuying  

 

在同一个子域名下 当嵌套的页面有跳转时 建议 在计算height之前讲容器高度变为0
支持(0)反对(0)
  

 

#23楼 2016-10-21 18:00 James2017  

 

@ icelin
引用C页面不是自己的页面，比如C页面是百度的页面，怎么在里边加代码啊，怎么实现跨域高度自适应啊

同问，是啊，不是自己的页面，如何做啊？
你有答案了吗？
支持(0)反对(0)
  

 

#24楼 2016-11-15 11:04 暗夜心慌方  

 

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

普通分类: 
javascript
Powered by Drupal

友情链接

校园好文网

 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2