JavaScript实现iframe高度随内容自适应的两种方案

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程序设计的内容能对大家有所帮助。