js控制iframe高度兼容ie浏览器

需求:

  在一个列表页面中需要在点开的时候展开列表信息对应的详细信息页,由于信息展示用到的是静态页面,所以首先想到的是ifram加载详细信息页;

由此引发了iframe加载页面后高度没有适应详细信息页内容的高度的问题。

以下代码为参考网上其他博客做出:

//展开点击事件
    $('.ewb-public-main').on('click', '.ewb-public-node', function(event) {
        var $this = $(this).parent();
        if (event.target.className != 'ewb-public-arrow') {
            $(".ewb-public-link").each(function(index, element) {
                if (!$(this).is($this)) {
                    $(this).removeClass('active');
                }
                $(".ewb-public-link").find(".ewb-public-arrow").text("展开");
            });
            $this.toggleClass('active');
            $(".ewb-public-link.active").find(".ewb-public-arrow").text("收起");
            var iframeid = $this.find(".ewb-public-block").find("iframe").attr("id");
            //alert(iframeid);
            dyniframesize(iframeid);
        }
    });
    
    //iframe页面宽度、高度自适应, down为iframe的id
    function dyniframesize(down) {
        var pTar = null;
        if (document.getElementById) {
            pTar = document.getElementById(down);
        } else {
            eval('pTar = ' + down + ';');
        }
        if (pTar && !window.opera) {
            //begin resizing iframe 
            pTar.style.display = "block"
            if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) {
                //ns6 syntax 
                //alert(pTar.contentDocument.body.offsetHeight);
                pTar.height = pTar.contentDocument.body.offsetHeight + 60;
                pTar.width = pTar.contentDocument.body.scrollWidth + 60;
            } else if (pTar.Document && pTar.Document.body.scrollHeight) {
                //ie5+ syntax 
                //alert(pTar.Document.body.scrollHeight);
                pTar.height = pTar.Document.body.scrollHeight;
                pTar.width = pTar.Document.body.scrollWidth;
            }
        }
    }

以上代码兼容ie9以上,尤其360安全浏览器。

转载于:https://www.cnblogs.com/yin1361866686/p/9835281.html

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值