前言：最近在编写html5-handbook时遇到ifarme自适应高度问题，查看了众多技术大牛的博文，在此总结如下：
iframe通信问题(服务器端访问)
iframe同域通信
- 实例主页面调用iframe页面函数
主页面
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>frame自适应高度</title>
</head>
<body>
<div id="test">我是主页面</div>
<iframe src="iframe.html" id="iframe" width="100%" frameborder="0"></iframe>
<script type="text/javascript">
function A(){
alert("A");
}
//iframe加载完毕执行回调函数
function iframeIsLoad(iframe,callback){
if(iframe.attachEvent){
iframe.attachEvent('onload',function(){
callback && callback();
});
}else{
iframe.onload = function(){
callback && callback();
}
}
}
var iframe = document.getElementById('iframe');
iframeIsLoad(iframe,function(){
var object = document.getElementById('iframe').contentWindow;
object.b();
});
</script>
</body>
</html>iframe页面
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>frame自适应高度</title>
</head>
<body>
<p>我是iframe<p>
<script type="text/javascript">
function b(){
alert("b");
}
self.parent.A();
alert(self.parent.document.getElementById("test"));
</script>
</body>
</html>- 通过子页面操作父页面
执行函数：self.parent.A()
获取元素：self.parent.document.getElementById(“id”);
执行顺序显而易见！
iframe跨域通信
本人知识有限，暂不讨论
iframe自适应高度
同域自适应高度
方法一思路：在iframe页面获取被嵌套iframe元素，通过JavaScript取得被嵌套页面最终高度；调用主页面函数进行设置iframe高度
注意
iframe页面获取高度，本人在这范二了；不过即使发现。页面高度参考
主页面
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>frame自适应高度</title>
</head>
<body>
<div id="test">我是主页面</div>
<iframe src="iframe1.html" id="iframe" width="100%"></iframe>
<script type="text/javascript">
function iframeAutoHeight(height){
var iframe = document.getElementById("iframe");
iframe.style.height = height + "px";
}
</script>
</body>
</html>iframe页面
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>frame自适应高度</title>
</head>
<body>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
</body>
<script type="text/javascript">
var iframeBodyHeight = document.body.scrollHeight;
self.parent.iframeAutoHeight(iframeBodyHeight);
</script>
</html>方法二思路：在iframe页面获取自身document.body.scrollHeight函数；回调函数进行设置iframe高度
时间有限，方法二代大家可以自己试试
跨域自适应高度
本人知识有限，暂不讨论