跨域iframe的高度自适应-白红宇

跨域iframe的高度自适应

阅读量：7071 次

发布时间：2019-06-28

本文共 4189 字，大约阅读时间需要 13 分钟。

If you cannot hear the sound of the genuine in you, you will all of your life spend your days on the ends of strings that somebody else pulls.

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

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

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

页面 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:

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

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

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

                            
// 计算页面的实际高度，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)      
    
}
};
         
       

线上示例：

转载于:https://www.cnblogs.com/webenh/p/6054975.html

你可能感兴趣的文章