百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>网页制作> 详谈Iframe自适应高度实现方法及原理(1/3)
分享文章到:

详谈Iframe自适应高度实现方法及原理(1/3)

发布时间:01/14 来源: 浏览: 关键词:

同域、子页面高度不会动态增加
这种情况最简单,直接通过脚本获取字页面实际高度,修改iframe元素高度即可。但有二点必须注意:

如果页面内有绝对定位或者没有清浮动的元素,情况有些复杂,不同浏览器处理结果不同,甚至包括webkit内核的浏览器,具体请看这个demo。所以你要么进行浏览器检测,要么用math.max计算一个最大值,要么你想别的方法。
iframe所包含页面可能非常大,需要很长的加载时间,为此直接计算高度的时候,很可能页面还没下载完,高度计算就会有问题。所以最好在iframe的onload事件中计算高度。这里还要注意的是,ie下必须使用微软事件模型obj.attachevent来绑定onload事件。而别的浏览器直接obj.onload = function(){}也可以。

(function(){
    var frame = document.getelementbyid("frame_content_parent"),
        setiframeheight = function(){
            var framecontent = frame.contentwindow.document,
                frameheight = math.max(framecontent.body.scrollheight,framecontent.documentelement.scrollheight);

            frame.height = frameheight;
        };
    if(frame.addeventlistener){
        frame.addeventlistener("load",setiframeheight,false);
    }else{
        frame.attachevent("onload",setiframeheight);
    }
})();

 

首页 1 2 3 末页
打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有3人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板