动态改变网页图标

目前绝大多数网站都配有一个网站图标(Favicon),就是页面标题前面的小图标,一般命名为favicon.ico,存放在网站的根目录下面。通常我们配置网站图标的代码如下:

经过测试发现IE仅支持ico格式的小图标,其他主流浏览器支持jpeg,gif,png格式,火狐下支持gif动画。
最近看到一个开源项目Piecon,能够动态生成饼图网页图标来表示网页加载进度,同时可以显示加载百分比,大家可以在Github上搜索源代码。
研究一番后,搞清楚了Piecon的基本原理:利用HTML5的Canvas保存为data:image扩展功能,将生成URL形式的图片设置到favicon的URL上进行替换。
Canvas提供了toDataURL的接口,可以方便的将canvas画布转化成base64编码的image。
我们来看一下使用Piecon生成的Base64编码的URL字符串,代码如下:(把href中的代码粘贴到浏览器地址栏回车即可看到图片)

Piecon显示的加载进度效果并不是网页内容加载的真实进度,只是用setInterval函数模拟的效果。对此我用5张ico格式的图片来模拟进度,让IE也能实现动态改变图标。代码如下:

结果确令人大失所望,火狐等浏览器有效,IE无效。虽然在head中删除旧的link标签与插入新的标签是成功的,但IE里面通过JS去操作dom元素不会反映到html源文件中去。一开始认为可能是缓存问题,但即便加上随机数也无效。

发表评论

电子邮件地址不会被公开。 必填项已用*标注