本文详解JavaScript实现iframe高度随内容自适应的两种方案。第一种由父页面通过contentWindow或contentDocument获取子页面文档高度并赋值；第二种由子页面直接访问父级iframe元素并修改其height属性。文中对比了不同浏览器对contentDocument的支持情况，并提供了完整代码示例供参考。
iframe高度自适应概述
本文介绍利用JavaScript实现iframe框架高度随内部内容动态变化的具体方法，供开发者参考。
实现该功能主要有两种途径：
父页面控制方案
第一种方案由父页面执行控制逻辑。
此方案需理解框架元素的contentWindow和contentDocument两个属性，其作用类似于window和document。区别在于，contentWindow在所有浏览器中均受支持，而contentDocument在IE6、IE7以及Chrome等浏览器中不支持。
父页面控制代码示例
<iframe onload="change_height()"></iframe>
function change_height(){
var iframe=document.getElementById("iframe_id");
//取得框架元素
var i_height=iframe.contentWindow.document.body.scrollHeight||iframe.contentWindow.document.documentElement.scrollHeight;
//取得框架内容的高度
iframe.height=i_height;
//改变
}
子页面控制方案
第二种方案由子页面（内容页）执行控制逻辑。
具体操作在内容页面中进行。
子页面控制代码示例
window.onload=function(){
var iframe=parent.document.getElementById("iframe_id");
//取得框架元素
iframe.height=document.body.scrollHeight||document.documentElement.scrollHeight;
//取得框架内容的高度并改变
}
希望上述关于JavaScript程序设计的内容能对大家有所帮助。