关于iframe内页高度自适应

做后台管理时候,经常用到在ifame里嵌入一个页面,但iframe高度不能随页面高度增加而增高.所以得借助JS解决.
在iframe内页里面欠入此段JS即可.
ContractedBlock.gif ExpandedBlockStart.gif Code
 1ExpandedBlockStart.gifContractedBlock.gif/**/////后台辅助
 2ExpandedBlockStart.gifContractedBlock.gifvar admin = {
 3    //计算页面最大宽高值
 4ExpandedSubBlockStart.gifContractedSubBlock.gif    size: function() {
 5        var a, yc;
 6        var b, wh, pw, ph;
 7        a = window.innerHeight && window.scrollMaxY ? document.body.scrollWidth : document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollWidth : document.body.offsetWidth;
 8        yc = window.innerHeight && window.scrollMaxY ? (window.innerHeight + window.scrollMaxY) : document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight;
 9        b = self.innerHeight ? self.innerWidth : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientWidth : document.body.clientWidth;
10        wh = self.innerHeight ? self.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
11        ph = yc < wh ? wh : yc;
12        pw = a < b ? b : a;
13        return new Array(pw, ph, a, yc)
14    }
,
15    //增加监听事件
16ExpandedSubBlockStart.gifContractedSubBlock.gif    addEvent: function(o, a, b) {
17ExpandedSubBlockStart.gifContractedSubBlock.gif        o.attachEvent ? o.attachEvent('on' + a, function() {
18            b.call(o)
19        }
) : o.addEventListener(a, b, false)
20    }
,
21    //iframe 跟其中内嵌页面高度重设iframe高度
22ExpandedSubBlockStart.gifContractedSubBlock.gif    init: function() {
23        var o = admin.size();
24
25        //这个ID是它上面包含它那个iframe的  ID
26        var k = parent.document.getElementById('mainframe');
27        if (!k) return;
28        k.style.height = o[1+ 'px';
29    }

30}

31//为 window 对像增加一个方法(iframe高度重新计算)
32admin.addEvent(window, 'load', admin.init);

查看DEMO



下载示例

转载于:https://www.cnblogs.com/devin/archive/2009/09/25/1574084.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值