一、跨子域的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>
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. 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." 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:
<li>页面 B:http:
<li>页面 C:http:
<li>D.js:http:
</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 | 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) {
}
};
|
|