站点加载完后更换favicon.ico图标的需求

HTML/CSS 2013-08-31 favicon.ico,网站图标,网页加载

有句话说程序猿是被各种实际工作中的需求给磨练而成的,经验值会随着磨练的次数越多而越老道,或者老奸巨猾(养成对所有需求都会推脱,把一个本可以几分钟实现的需求说成比登天还难,这句话估计会招来拍砖,但的确如此)。相信大多数新手听到一个需求时会认真的去研究如何实现,因为它需要提升,需要赢得公司对他的信任以此日后可以方便提出涨薪。

最近我也被项目中的一个需求:网页加载完后中途更换favicon这个需求给折磨了一通,虽然找到了解决方案,但还是值得跟大家分享。

为何会有这样的需求

可能又朋友就纳闷了,网页在初始的时候生成不就行了吗?可是我告诉你,这个favicon是后台可以配置的,并且这个项目并不靠后端语言生成任何HTML页面,只是提供API接口,网页加载后JavaScript会请求配置数据,当配置数据返回来的时候再把默认的favicon替换成后台配置的favicon

这不是一个容易实现的需求,因为浏览器的兼容性

根据我当时的初步判断,这个需求应该没有什么难度,只要数据返回来以后在把linkhref地址给替换就好!

事实证明并非那么简单就能搞定,后来经过我实践发现这里有浏览器兼容的问题,先给大家看一段示例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="shortcut icon" href="favicon1.ico" />
		
	</head>
	<body>
		<p>默认指定favicon1.ico,然后中途使用js更换为favicon2.ico</p>

		<script type="text/javascript">
			
			var changeIcon = function(){	
				var link = document.head.querySelector("link");
				link.href = "favicon2.ico";
			};
			
			changeIcon();

		</script>
	</body>
</html>

文件如下:

以下所有的例子都是以favicon1.ico,也就是jQuery的图标作为默认,然后替换为favicon2.ico我站点的图标。

这段示例代码非常简单,页面head头部定义了默认的favicon图标,然后JavaScript会改写它的href值,达到替换favicon的功能。先来看看个浏览器的情况

FireFox, 有效

IE, 无效

Chrome, 有效

Opera,有效

Safari,无效

整体上看,还是不错,大部分都支持,但IE是一块心病啊,于是我再把代码修改一下,来个setTimeout1秒后在跑换图标的动作,因为这样更接近于实际的情况,代码加载完后从Ajax请求数据到数据返回然后经过一些处理,我就姑且把这个过程看成是1秒钟吧!

把实例代码中的changeIcon()替换成setTimeout(changeIcon, 1000)

FireFox,无效

IE,无效

Chrome,有效

Opera,有效

Safari,无效

情况不是很乐观,只有Chrome与Opear有效!no

难道是JavaScript没执行,所以它没生效,在无效FireFox中使用FireBug我们看到实际图标已经由默认的favicon1.ico更新到favicon2.ico了,但实际上还是显示旧的

IE使用开发人员工具查看,同样link标签href已经更改,但就是无效

link标签的href已被修改,但还是没法显示修改后的favicon图标这就没辙了!!

注释默认图标声明,改为动态创建

后台我到网上搜索资料,发现这个关键字不是很好组合,很容易就让人家误认为你是在找如何制作gif动画的favicon.ico。没办法,只好放弃网上搜索,后来想到如果我把head头部默认的图标定义link标签去掉,最后在JavaScript动态填充这个标签,于是我把代码修改:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />

		<!-- 默认我不加载它
		<link rel="shortcut icon" href="favicon1.ico" />
		-->
		
	</head>
	<body>
		<p>默认指定favicon1.ico,1秒后使用js更换为favicon2.ico</p>

		<script type="text/javascript">
			
			var changeIcon = function(){	
				var link = document.createElement("link");
				link.href = "favicon2.ico";
				link.rel = "shortcut icon";
				document.head.appendChild(link);
			};

			setTimeout(changeIcon, 1000);

		</script>
	</body>
</html>

再来看看各个浏览器实现的情况

FireFox,有效

IE,无效

Chrome,有效

Opera,有效

Safari,无效

最后剩下IE与Safari无效,IE这货本来就让我无语,没想到Safari也搭进来,FireFox还好,改变代码后让它从无效变成有效!

文字链接:《站点加载完后更换favicon.ico图标的需求

文章地址:http://www.qttc.net/201308370.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 4

  • 12121
    2018-01-09 16:02:09 [ 跟帖 ]
    1 #
  • 还没有解决?感觉这是浏览器本身的处理问题吧。IE 烂点的浏览器,一上来就读取 ico 然后后来的改变就不再请求了。
    2013-09-04 11:03:42 [ 跟帖 ]
    本来就不指望解决IE这个bug,也没有深入分析,估计它读取favicon的机制与其它浏览器不同,所以它始终是独树一帜,不合群!
    2013-09-04 19:52:46 [ 跟帖 ]
    你好,我现在也遇到了这个问题,动态修改href的值,IE浏览器就是不显示,不知道你现在解决这个问题没,方便说一下吗?
    2014-07-25 16:46:04 [ 跟帖 ]
    2 #