php iframe 自适应高度,推荐几款完美实现iframe高度自适应

iframe自适应内容大小,支持跨域检测内容大小改变窗口大小，支持多个iframe嵌套,提供一系列的页面大小的计算方法来支持复杂的CSS布局,

检测到窗口大小调整可以使网页CSS动画和过渡调整大小事件, 提供自定义的大小和滚动的方法. iFrameResize( [{options}],

[css selector] || [iframe] ); $('iframe').iFrameResize( [{options}] );

支持浏览器： Internet Explorer 9, 10 , 11 Chrome 32 (Mac 10.9) Firefox 26

(Mac 10.9) Safari 7 (Mac 10.9) iOS 7 Safari iOS 7 Chrome Android 4.4

Chrome

其实iframe高度自适应自适应的原理差不多如下

iframe 嵌套界面自适应是一个比较常见的功能需求，使用原生的 JS 编写，适用于 chrome,firefox,IE 浏览器，原理差不多下面是代码部分。

script>

// 计算页面的实际高度，iframe自适应会用到

function calcPageHeight(doc) {

var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)

var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)

var height = Math.max(cHeight, sHeight)

return height

}

//根据ID获取iframe对象

var ifr = document.getElementById('main')

ifr.onload = function() {

//解决打开高度太高的页面后再打开高度较小页面滚动条不收缩

ifr.style.height='0px';

var iDoc = ifr.contentDocument || ifr.document

var height = calcPageHeight(iDoc)

if(height < 850){

height = 850;

}

ifr.style.height = height + 'px'

}

相关链接