让iframe载入前没有大片空白区域

前段时间微博流行，很多博客也加入了微博秀，并肩作战，记录生活和折腾时用博客，短句记录和发牢骚时用微博，本站从一开始就一直把微博秀融入wp的侧边栏，很明显，既然是个人博客，少不了展示日常吐槽，就把它当做公告栏或信息栏。

曾twitter火爆的时候，大家都在绞尽脑汁的同步推的信息在侧边栏，后来微博大火了，国内微博也陆续上阵，因为侧边栏的同步延迟问题，很多人干脆直接调用官方的微博秀，解决同步时间延迟的问题，功能上更强大更美观更互动，唯一缺点是通过iframe嵌套载入侧边栏，大部分做网站的人都不喜欢嵌套网页。

第一：对seo不友好。
第二：w3c标准不好通过。
第三：对整个网页显示体验不佳，载入网页有延迟和空白。
第四：有的浏览设备不支持显示嵌套，不能保证完整性。

这些是我个人认为，可能还有其他一些的影响，不过第一条，嵌套一个可能不会影响seo，第二条，w3c可以调试通过，第四条，只要不是塞班那种老手持设备，大部分浏览器都支持显示嵌套网页，最后就是第三条，哎，有人会说，绕了一圈，原来就是这个问题啊，对，可能对你来说很简单，但是对我这个对代码有恐惧症的人来说，也许怎么折腾都是浪费时间，不过既然文章都写到这里了，你一定知道，我已经折腾出来了，具体刷新本站首页，查看侧边栏微博的显示变化，呵呵，现在分享一下如何实现：

还是有必要再解释一下我们要做什么，大家都知道，微博秀的代码是使用iframe嵌入网页的，当你进入一个网站的时候，会发现其他都显示了，就微博秀显示得最慢，因为它比你的网站载入要慢一些，这就造成页面都显示完了，那个地方还空白着，要等一会才能显示出微博来，这样是不是很不爽？也许你会说那就放侧边底部去，看不见不就得了，但是微博最佳的位置其实就是侧边栏顶部，放其他地方会被很多人直接无视，你可以想象公告栏没人把它放底部吧，好了，可以开始了。

简单的说，就是不让iframe还没载入完网页时那个地方显示空白，在页面未载入前，那个地方内容应该是紧凑的，等网页载入完成了，那么就撑开指定的高度，显示iframe载入的网页。换句更简单的话说，这是一个非一般的iframe自适应高度的js实现方法。

可能是最简单的解决方法：

<h3>我的微博</h3>
<ul>
<iframe id="frame_content" src="http://show.v.t.qq.com/index.php?c=show&a=index&n=zhengyong100&w=0&h=548&fl=2&l=30&o=17&co=0" scrolling="no" frameborder="0" width="260" onload="this.height=400"></iframe> //这个地方是关键，一旦iframe设置高度，那个地方就会空白出来。
<script type="text/javascript">
function reinitIframe(){
var iframe = document.getElementById("frame_content");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height =  height;
}catch (ex){}
}
window.setInterval("reinitIframe()", 0); //这个后面的0很有用处，你可以设置未载入网页时的高度，关键也在这里，设置0，那么就没有空白了。
</script>
</ul>

在研究出来之前，我尝试了很多其他方法，试图填补那个空白，为了不让进入网站感觉有空白和延迟，还在那地方放了一个gif的载入loading图片，但在loading图片下面还是空白一大片，后来还用了之前所使用的“提高页面载入速度（广告载入）”的那套方法，把iframe放在底部，然后在显示loading的那个位置显示出来，这种方法虽然能达到我要的效果，可惜根本就显示不出来，对iframe没用，只能是一些广告代码和简单的网页代码，而现在这个方法，太完美了！还兼容IE,FF等浏览器，呵呵，不知道大家是不是有更好更简单更完美的解决方法呢？

好啦， 终于让iframe嵌套网页载入前没有空白区域了，不过还是很希望在载入前加入个loading图片，这个稍后在折腾。

赏