前端之家 收集整理的这篇文章主要介绍了
如何让iframe网页自适应高度? ,
前端之家 小编觉得挺不错的,现在分享给大家,也给大家做个参考。
编程之家 jb51.cc 做后台 管理时候,经常用到在ifame里嵌入一个页面 ,但iframe高度不能随页面 高度增加 而增高.所以得借助JS解决 . 在iframe内页里面欠入此段JS即可.
以下为引用的内容 : ////后台 辅助 var admin = { //计算页面 最大宽高值 size: function() { var a,yc; var b,wh,pw,ph; a = window.innerHeight && window.scrollMaxY ? document.body.scrollWidth : document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollWidth : document.body.offsetWidth; yc = window.innerHeight && window.scrollMaxY ? (window.innerHeight + window.scrollMaxY) : document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight; b = self.innerHeight ? self.innerWidth : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientWidth : document.body.clientWidth; wh = self.innerHeight ? self.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight; ph = yc < wh ? wh : yc; pw = a < b ? b : a; return new Array(pw,ph,a,yc) }, //增加 监听事件 addEvent: function(o,b) { o.attachEvent ? o.attachEvent('on' + a,function() { b.call(o) }) : o.addEventListener(a,b,false) }, //iframe 跟其中内嵌页面 高度重设iframe高度 init: function() { var o = admin.size();
//这个ID是它上面包含它那个iframe的 ID var k = parent.document.getElementById('mainframe'); if (!k) return; k.style.height = o[1] + 'px'; } } //为 window 对像增加 一个方法 (iframe高度重新计算) admin.addEvent(window,'load',admin.init);
最后看一下演示:
提示 :可修改 后代码 再运行!