最近因為公司之前的系統用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 {
width: 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 {
width: 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賦值，同樣只適用於同源