iframe跨域自适应高度
在跨域的情况下，不能通过直接获取子页面的高度，这就需要辅助页面的帮忙。
这里就需要a.html,b.html,c.html，和a.js!
假设a嵌套c，并且a和c不同域，这时候我们就需要用与a同域的b.html来作为传递参数的页面。
代码如下：
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>a.html</title>
</head>
<body>
<iframe src="你的地址" id="ifr"></iframe>
</body>
</ht![]()
ml>
<html>
<head>
<meta charset='utf-8' />
<title>a.html</title>
</head>
<body>
<iframe src="你的地址" id="ifr"></iframe>
</body>
</ht
这边并没有什么特殊的地方，按照正常的写就行！
a.js
//获取c.html的高度
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;
}
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;
}
//将获取到的高度用url将参数传给b.html
window.onload = function() {
var doc = document;
var myifr = doc.getElementById('myifr');
if (myifr) {
myifr.src = '![]()
b.html的地址';
}
var height = calcPageHeight(doc)
if (myifr) {
myifr.src = '![]()
b.html的地址?height=' + height
}
};
window.onload = function() {
var doc = document;
var myifr = doc.getElementById('myifr');
if (myifr) {
myifr.src = '
}
var height = calcPageHeight(doc)
if (myifr) {
myifr.src = '
}
};
这里的关键就是把获取到的c.html得高度传给b.html，这也是跨域实现自适应的关键，注意，这里js放在a.html的同域
b.html
<!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>
<ht![]()
ml>
<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>
<ht
这里就是将获取到的c.html高度的值改变a.html里iframe的高度。
最后在c.html用id为myifr的iframe嵌套b.html并且隐藏起来就行，还有就是别忘了引入a.js！
浙公网安备 33010602011771号