让iframe自适应高度-真正解决

需求：实现 iframe 的⾃适应⾼度，能够随着页⾯的长度⾃动的适应以免除页⾯和 iframe 同时出现滚动条的现象。 （需要只有iframe出现滚动条）

本⼈⼀开始这么写：会造成只有主页⾯加载是设定⼀次。但是窗体变⼩或变⼤后不会触发。

$(function setIframeHeight() {

var iframe ;//⾼度初始化600，为了14⼨笔记本 iframe =document.getElementById('mainiframe');

iframe.height=document.getElementById(\"sidebar\").offsetHeight-56;

// if (iframe) {

// var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;// if (iframeWin.document.body) {

// iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;// }// } })

今天有朋友问到我关于“iframe⾃适应⾼度”的问题，原本以为是很简单的问题，没想到折腾了20分钟才搞定。期间遇到⼏个问题，要么是⾼度⾃适应了，但是当窗⼝改变时会出现滚动条。也就是当窗⼝放⼤时iframe没有⾃动跟随变⼤显得很⼩，或是当窗⼝缩⼩时iframe还是之前那么⼤就出现了滚动条。还有或是⾼度不准确，那么就达不到想要的效果了。

为什么需要使⽤iframe⾃适应⾼度呢？其实就是为了美观，要不然iframe和窗⼝长短⼤⼩不⼀，看起来总是不那么舒服，特别是对于我们这些编程的来说，如鲠在喉的感觉。⾸先设置样式

body{margin:0; padding:0;}

如果不设置body的margin和padding为0的话，页⾯上下左右会出现空⽩。html代码如下

下⾯就是今天⼩编写的时候遇到的问题，考虑到有些朋友可能没怎么⽤jquery就直接⽤js吧。

⽅法⼀

var ifm= document.getElementById(\"myiframe\");ifm.height=document.documentElement.clientHeight;

这个⽅法可以达到让iframe⾃适应⾼度的效果，但是如果你将窗⼝放⼤或缩⼩效果就不出来了，也就是本⽂开头讲的。需要再次刷新，那就不属于⾃适应了。

那么问题来了，需要解决当窗⼝改变⼤⼩的时候执⾏js事件，以让iframe⾃适就⾼度。那么就需要将相关的代码写成函数，并且给iframe加上onLoad=\"changeFrameHeight()\"，也就是下⾯的⽅法⼆了。

⽅法⼆

js代码也得跟着改

function changeFrameHeight(){

var ifm= document.getElementById(\"iframepage\"); ifm.height=document.documentElement.clientHeight;}

window.onresize=function(){

changeFrameHeight(); }

window.onresize的作⽤就是当窗⼝⼤⼩改变的时候会触发这个事件。

所以，使⽤⽅法⼆就可以完美的、真正的让iframe⾃适应⾼度了，试试看吧，并且兼容多种浏览器。==上⾯摘录结束

====本⼈修改为：（⽅法1）

function changeFrameHeight(){

var ifm= document.getElementById(\"mainiframe\");

ifm.height=document.documentElement.clientHeight-56; //56是头顶的⾼度，和⽹友估计不⼀样。 }

$(function(){ window.onresize=function(){

changeFrameHeight(); }}); //这⾥不知道是否还要 $(function(){}) 这个闭包吗？后证实不需要

但要保留 window.onresize=function(){ changeFrameHeight();}

==本⼈ ⽅法2 html去掉每次iframe onload都触发计算⾼度，更妙 ；推荐

function changeFrameHeight(){

var ifm= document.getElementById(\"mainiframe\");

ifm.height=document.documentElement.clientHeight-56; }

window.onresize=function(){ changeFrameHeight();} $(function(){changeFrameHeight();});

特别声明： changeFrameHeight() ⽅法⾥⾯的计算⾼度要结合你的布局，并不是⽹上都合适你的。并且这个只有⼀个iframe⽐如：下⾯的⾥⾯有很多⽅法，有点头晕。^_^