判断图片加载完成，自适应iframe高度

在做RSS订阅的时候遇到这样一个问题:点击文章标题时，弹出文章的详细界面。本来打算直接用弹出div层来显示文章的内容，但是设置div的overflow:scroll滚动条不好看，还有就是在android、ios4及以下，会失效（这个可以使用iscroll.js来解决，）。最后改为iframe来显示文章内容。这里涉及到子页面和父页面的通信问题，不清楚可以看js之iframe子页面与父页面通信。

我在子页面获取到父页面传递过来的文章内容时，使用innerHTML将内容放入div中。代码如下：

<div id="article-area-id">
        <div class="article-area" id="art">
        </div>
    </div>
    <div id="close"></div>
    <script src="js/vendor/jquery-1.10.2.min.js"></script>
    <script>
        var close_e = document.getElementById("close"),
                e =  document.getElementById("art");
        function get(data){
            e.innerHTML = data;
            close_e.setAttribute("class","close");
            resizeIframe();
        }
        function resizeIframe(){
            parent.setIframe(document.body.offsetHeight);
        }
        close_e.addEventListener("click",function(){
            parent.closeIframe();
            close_e.removeAttribute("class");
        });

    </script>

在innerHTML后，iframe的高度并没有因为里面内容增加而改变，这里就需要iframe的高度自适应了。这里有一篇博文：Js动态获取iframe子页面的高度总结

但是我这里情况和这篇博文说的不同，因为我的iframe在设置内容时，已经加载了，并不会触发onload事件，所以我采用子页面重新获取自己的高度，然后传递给父页面，

父页面再来设置子页面iframe的高度。

function setIframe(count) {
    var e = document.getElementById("ifm-id"),
        clientWidth = document.body.clientWidth,
        sty;
    sty="height:"+(count+50)+"px;top:"+$(document).scrollTop()+"px;left:"+ (clientWidth>600?clientWidth*0.2+"px":clientWidth*0.1+"px");
    e.setAttribute("style",sty);
    e.scrolling="no";
    //重置主页面高度，解决如果弹出文章高度超过页面高度时显示不完全。
    if(count+$(document).scrollTop() > document.body.clientHeight){
        document.body.height = count+$(document).scrollTop();
    }
}

在上面代码处理后，就可以重置iframe的高度了，但是由于内容里面包含图片，如果在传递给父页面高度时，子页面还没有加载图片，就可能出现传给父页面的高度小于图片加载完成后的高度，导致子页面显示不完全。最开始，我想到一篇博文 《JS快速获取图片宽高的方法》，然后使用正则srcReg = /http:\/\/\S*\.(jpg|png|jpeg)\S*(?=")/g,将所有的图片全部获取然后获得宽高，为每个img设置width和height属性，这样就能获取iframe的正确高度而且还能根据设备的屏幕宽度将太大的图片缩小。但是由于我是从第三方抓取文章，请求图片会遇到304权限问题时使用正则将无法获取的图片隐藏，代码如下：

imgReg = /src=\S*\.(jpg|png|jpeg)\S*"/g;
des = description.replace(imgReg,function($1){
            return $1+' οnerrοr=\"this.style.display=\'none\';return true;\"';
        })

如果图片没有权限，将会报异常，但是由于无法捕获图片的异常，就不能及时的终止获取图片宽高的请求事件，这回导致无法快速获取图片宽高，在多个图片的时候会有很大的延迟。这个问题纠结了好久，没有找到好的解决方案，记下来看看以后能不能看到别人的解决方法。

这里有一点疑问，留作下次试验，那就是img下载完成后，使用innerHTML将HTML代码写入文档后，图片是不是在缓存中读取，如果不是会导致额外的网络请求，这样肯定是不好的。最后采用的解决方法是在父页面获取滚动事件，判断子页面body高度和iframe高度是否一致，如果不一致，则跳转iframe高度。

    $(window).scroll(function(){
        $this = $(this);
        if($(document).height() - $this.height() - $this.scrollTop() < 400){
            $(".loadImg").addClass("load");
            addContainer(10);
        }
        var $ifm = $("#ifm-id");
        var ifmHeight = $(document.getElementById("ifm-id").contentWindow.document.body).height();
        if($ifm.height() !== (ifmHeight+50)){
            $ifm.height(ifmHeight + 50);
        }
    });

　　

转载于:https://www.cnblogs.com/towersxu/p/4360656.html