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

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

在innerHTML后，iframe的高度并没有因为里面内容增加而改变，这里就需要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的高度了，但是由于内容里面包含图片，如果在传递给父页面高度时，子页面还没有加载图片，就可能出现传给父页面的高度小于图片加载完成后的高度，导致子页面显示不完全。最开始，我想到一篇博文 ，然后使用正则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);        }    });