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

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

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

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

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

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

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

iframeheight02iframeheight01

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

<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图片,这个稍后在折腾。

分类:网络博客 标签:,,,,,

上一篇:ajax版Google自定义站内搜索

下一篇:Post Ratings插件无法工作的解决方法

已经有18条评论!

Loading...
  1. 博主真是太有才了

    沙发!
  2. 其实我觉得我的侧边栏推特信息就挺好的,不会显得突兀。是不是显示纯文字的更好,你说呢?

    板凳!
  3. 我的沙发.,…我的板凳 …. [哭泣]

    地板!
  4. 这些懂得少就没有去搞过

    4F
  5. 这个方式不错,能够很好的避免大量空白的问题

    5F
  6. 没试过调用微博内容

    6F
  7. 还是没心思去折腾微博

    7F
  8. sui

    来看看 呵呵

    8F
  9. [困惑] 过来看看兄弟!

    9F
  10. 我个人不会在自己博客上使用iframe,不太喜欢调用其他地方数据。

    11F

Leave a Reply to 夏宇轩网赚博客

gravatar

冷笑 忧伤 恶魔 笑脸 红脸 咧嘴笑 吃惊 惊讶 困惑 耍酷
大笑 抓狂 痛苦 转眼珠 眨眼 好主意 囧 无表情 哭泣 坏笑