html iframe自动高度,真正解决iframe高度自适应问题

1.前言

解决iframe高度自适应问题有两种方法

1.pym

2.手动设置iframe的高度

本文主要是总结第二种实现方式，因为第一种pym.js插件我没用懂

如果使用iframe时，遇到以下的需求：

iframe的高度始终等于嵌入页面内容的高度，而不是屏幕的高度

右侧不允许出现两个滚动条

iframe的高度自适应不仅仅是指刚加载进来时，也有可能嵌入内容的高度会随点击变化(如：下拉菜单，左侧导航栏等)

页面可能同时嵌入多个iframe

2.contentWindow对象

*需要起个服务，不要直接在本地打开

这是个只读属性，返回指定的iframe的window对象

拿到这个对象，就可以根据正常网页的方法拿到嵌入(子)网页的文档高度，然后把值附给父页面的iframe的height。

function setIframeHeight(iframe) {

if (iframe) {

var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;

if (iframeWin.document.body) {

iframe.height = iframeWin.document.body.scrollHeight;

}

}

};

为了监测网页高度是否因为点击了某个下拉按钮高度变化，我们建立一个定时器任务，这样一直监视着子网页的高度。

setInterval(functio