最近因为公司之前的系统用iframe，里面的高度不能自适应，导致了很多问题，今天特意拿来研究一下，从网上找了一些方法试验了一下，这里记录一下成功的方法
1、父页面获取子页面的高度，并给父页面赋值
父页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="myhtml">
<iframe src="./bbb.html" frameborder="0" id="ifram"></iframe>
</div>
</body>
</html>
<script>
function setIframeHeight(id){
var iframe = document.getElementById(id);
try{
if(iframe.attachEvent){
iframe.attachEvent("onload", function(){
iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;
});
return;
}else{
iframe.onload = function(){
var obj = ifram.contentDocument || ifram.contentWindow.document;
iframe.height = obj.body.scrollHeight+16;
};
return;
}
}catch(e){
throw new Error('setIframeHeight Error');
}
}
setIframeHeight("ifram");
</script>
<style>
#ifram {
300px;
border: 1px solid #ccc;
}
</style>
iframe里面的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="test">lalalalala</div>
</body>
</html>
<style>
#test {
height: 1000px;
}
</style>
小结：为什么要加16，试验了一下刚好差一个滚动条的高度，为了不出现双滚动条，只能再把他的高加了一点。
另外只测试了chrome，在chrome下直接是不好使的，需要自己起一个服务，才不报错，这在同源下做了测试。
2、子页面给父页面赋值
父页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="myhtml">
<iframe src="./bbb.html" frameborder="0" id="ifram"></iframe>
</div>
</body>
</html>
<style>
#ifram {
300px;
border: 1px solid #ccc;
}
</style>
iframe里面的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="test">lalalalala</div>
</body>
</html>
<script>
function setParentIframeHeight(id){
try{
var parentIframe = parent.document.getElementById(id);
if(window.attachEvent){
window.attachEvent("onload", function(){
parentIframe.height = document.documentElement.scrollHeight;
});
return;
}else{
window.onload = function(){
parentIframe.height = document.body.scrollHeight;
};
return;
}
}catch(e){
throw new Error('setParentIframeHeight Error');
}
}
setParentIframeHeight("ifram");
</script>
<style>
#test {
height: 1000px;
}
</style>
小结：通过parent.document.getElementById(); id是父页面的id赋值，同样只适用于同源