在做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+' onerror=\"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);
}
});