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(function () {
setIframeHeight($(‘#iframe’)[0])
}, 200)
页面有可能同时存在多个iframe
$(“.flexiframe”).each(function (index) {//iframe公用类名：flexiframe
var that = $(this);
(function () {
setInterval(function () {
setIframeHeight(that[0])
}, 200)
})(that)
});
如果此时，你发现当子页面高度变高时，高度可以自适应的变高，但在变低时，会发现父页面的高度并没有向我们想象的随着子页面降低，导致底部留有大面积空白的问题，请继续往下看
3.文档声明的重要性
将子页面的文档声明改为就好了
4.demo
父页面：a.html
a
./flexiframe.js
// 使用前先将子页面文档声明改为
//
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.body.scrollHeight;
}
}
};
$(“.flexiframe”).each(function (index) {
var that = $(this);
(function () {
setInterval(function () {
setIframeHeight(that[0])
}, 200)
})(that)
});
子页面b.html，分别注释两种声明方式，点击变大变小按钮看一下右侧滚动条的变化，(细节可以F12看一下iframe种的html和body跟div的高度关系)
小
$(‘#btn’).on(‘click’, function () {
if ($(this).text() == ‘小’) {
$(this).text(‘大’).parent().css(‘height’, ‘200px’)
} else {
$(this).text(‘小’).parent().css(‘height’, ‘2000px’)
}
})
5.总结
1.有时间还是要了解下html的进化历史。
2.本文flexiframe.js可以直接使用，但是只支持同源下父页面可以通过contentWindow获取子页面的内容高度，跨域的下次再说。
3.欢迎指出问题或留言加深本文的深度，例如html5已经不需要声明DTD，但是我解决这个问题不得不改一下DOCTYPE，退化到html4，为什么在html5中子页面html和body的高度不是由内部的内容决定的，而是等于父元素iframe的高度？
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/218804.html原文链接：https://javaforall.net
