iframe页面高度自适应

 

iframe嵌套页面是经常会用到的，那么嵌套页面能够在主页无损显示呢。

  

事实证明显然不行，这已经是给iframe标签加了widt：100%和height：100%；的结果。

Height：100%无效，那直接给高度呢。

嗯，嵌套页面完全显示出来了。那切换到另一个嵌套页面试试。

不同的页面高度不同，切换到不同页面就会造成高度不够的情况。

那iframe页面高度自适应是怎么做到的呢。

其实就是切换不同的页面时获取到对应的页面高度给予iframe标签。

1、首先选择到iframe标签

   var ym = document.getElementById('content');

给嵌套页面加载事件ifr.onload = function () {

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

    ym.style.height = '0px';

var hig= ym.contentDocument;

//contentDocument属性以 HTML 对象返回框架容纳的文档

var height = measure(hig)

//使用measure方法获取高度

ym.style.height = height + 'px';

//将高度赋予iframe标签

}；

 

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

scrollHeight：返回元素的整体高度；clientHeight：返回浏览器窗口高度

        function measure(hg) {

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 = doc.body.scrollHeight；

  //返回返回元素的整体高度

        }

 

这样就能够让嵌套页面无障碍显示了。