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

网络博客 郑永 8317℃ 18评论

前段时间微博流行,很多博客也加入了微博秀,并肩作战,记录生活和折腾时用博客,短句记录和发牢骚时用微博,本站从一开始就一直把微博秀融入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图片,这个稍后在折腾。

转载请注明:郑永博客 » 让iframe载入前没有大片空白区域

历史上的今天:

(18)个小伙伴在吐槽
Loading...
  1. 博主真是太有才了

    沙发!
  2. chojemmy2013-02-26 04:49 Google Chrome 24 Windows 7 回复

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

    板凳!
    • 郑永2013-02-26 09:01 Android Webkit 4 Android 4.1.2 回复

      曾就因为其他原因,想换成纯文本,可惜还是喜欢官方的,互动强。

  3. 小蝴蝶2013-02-26 10:00 Google Chrome 25 Windows 7 回复

    我的沙发.,…我的板凳 …. :cry:

    地板!
  4. 刘柳2013-02-26 10:10 Sogou Explorer Windows 7 回复

    这些懂得少就没有去搞过

    4楼
  5. 菜根博客2013-02-26 23:27 Firefox 19 Windows XP 回复

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

    5楼
  6. 鲜活优惠码2013-02-26 13:03 Internet Explorer 9 Windows 7 回复

    没试过调用微博内容

    6楼
  7. 美国服务器2013-02-27 03:50 TheWorld Browser Windows 7 回复

    还是没心思去折腾微博

    7楼
    • 郑永2013-02-27 09:13 Firefox 19 Windows XP 回复

      微博不用折腾,直接发牢骚就好。

  8. sui2013-02-27 08:06 Google Chrome 21 Windows 7 回复

    来看看 呵呵

    8楼
  9. 平顶山2013-02-27 23:37 Google Chrome 24 Windows XP 回复

    :?: 过来看看兄弟!

    9楼
  10. 我的名字叫麒2013-02-27 23:47 Google Chrome 25 Windows 7 回复

    对iframe有点反感

    10楼
  11. zwwooooo2013-03-01 12:56 Firefox 19 Windows 7 回复

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

    11楼
    • 郑永2013-03-01 13:35 Firefox 19 Windows XP 回复

      是啊,大多数人都不喜欢,所以我把微博秀给卸下了。

gravatar
发表我的评论
取消评论


Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址