【开发过程问题汇总系列】【iframe自适应高度】兼容 FireFox和IE内核的浏览器

iframe自适应高度

1.问题现象

做项目的过程中js控制iframe的场景大量存在，今天在开发过程中遇到了此问题，故此记录解决方法。

在iframe中设置了高度为100% <iframe height="100%"></iframe> ， 此方法在IE内核的浏览器中显示内容页面没问题，但在FireFox中完全没反应。

2.解决方案

使用js控制，获得iframe的内容对象，再获得当前页面内容对象，如果两个对象都能获取到，则设置iframe内容对象的高度为页面内容对象的滚动条高度。

在iframe的onload方法中调用此函数就ok了。

function initIframeHeight() {

var frame = document.getElementById(“Iframe的ID”);

var pageDoc;

if (document.frames) {

pageDoc = frame.document;

} else {

pageDoc = frame.contentDocument;

}

if(frame != null && pageDoc != null) {

frame.height = pageDoc.body.scrollHeight;

}

}

3.结果

问题解决，在FireFox和IE内核的浏览器中均能自动拉高iframe的高度，内容页显示无问题。