Firefox 动态修改 favicon 不显示火狐电竞问题
发布时间:2023-02-01 22:25:47

  项目中需要动态改变页面的 favicon,icon 文件存储在阿里云(OSS)上。改变 favicon 的方式是通过获取 link 元素,把 icon 的 url 赋值给其 href火狐动态。在 chrome 上测试可以正确显示,但是在 firefox 上却没有显示图标。

  动态改变 favicon 以前我也没有做过,秉承不放过一个可能的 debug 策略,首先怀疑 firefox 不支持动态修改 link[rel=icon]。于是打开 fiddler 查看在动态赋值图标 url 后有没有图片请求发出(firefox自带的开发者工具中没有显示 link[rel=icon] 的请求)。在 fiddler 中发现 firefox 是发送了请求的,那么接下来就看下返回了。此时发现阿里云返回的是403,估计是请求头缺少了什么东西导致请求被阿里云屏蔽了。查看图片的请求头发现缺少 Referer,估计就是这个影响了。我重新打开 chrome 看了下图片的请求是有 Referer 的,那么基本上可以确定这是 firefox 的一个 bug。最终我去到阿里云的管理界面看了下防盗链的设置界面火狐电竞,里面选择的是 Referer 不能为空,这下证实了我的猜测:由于 firefox 的加载 favicon 的时候,请求头缺少了 Referer,被阿里云防盗链了。

  解决方案其实是在 google 的时候发现的,link[rel=icon] 的 href 不但可以写 url,还可以写图片的 base64 编码,和 img 标签一样。那么我是否可以用 img 标签加载这个图标然后转成 base64 编码再赋值给 link[rel=icon] 呢?说干就干,依稀记得转 base64 编码可以使用 canvas.toDataURL 这个 API 来转,查了下浏览器支持情况,幸好项目要求支持的浏览器都支持。代码如下:

  测试结果是 icon 图片是显示出来了,但是只显示了部分图片(囧)。那...应该可能是图标有问题?遂找了另外一个 png 的图标试试了,测试通过。难道是 firefox 中使用 img 加载 ico 文件有问题?只能上 google 了,经过了一番搜索和测试基本能确定下来,firefox 显示 ico 文件是没有问题的,但是 canvas.toDataURL 这个 API 在不同的浏览器中支持的图片格式有偏差,而且格式类型支持的都有限。所以我们最初用的 ico 文件通过 canvas.toDataURL encode 之后的编码不是完全正确的。此时我想到两个解决方案:

  随着html5的普及和Web技术的净化,从Windows XP的IE6到IE8、IE9火狐电竞、IE10、IE11,Edg...

  火狐电竞

  Swift版本点击这里欢迎加入QQ流: 594119878最新更新日期:18-09-17 About A cu...

  Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...

  文/庸荛 目录云端·路途上一章《第一章·开始》下一章《第三章·聚会》 王博良站在满是八十年代感的水龙头面前,用冰...

  在来米培训学校管理系统中如何快速导入我们从各类渠道收集的潜在学员信息,只有满足一下几点就能快速导入。 1、拥有导入...

  我们都是走在孤独路上的孩子。 来北漂半年多了。已经习惯独处的我,还是害怕上了孤独。尽管与室友住在一块,但是这...

  火狐电竞