javascript - 根据浏览器动态更改图标

Question

我正在尝试想出一种方法来根据用户浏览器将我的图标设置为动画/静态。两个网站图标是

<link rel="icon" href="animated_favicon.gif" type="image/gif" >
<link rel="icon" type="image/x-icon" href="favicon.ico">

我可能可以使用以下命令检测过时的浏览器

navigator.userAgent.indexOf(//unfitBrowswer);

但是这段代码应该驻留在项目中的什么位置来设置图标呢？我应该创建一个我的所有组件都使用的服务，还是在 main.ts 或其他地方的某个地方？

由于 Angular 位置而不是可以在启动时运行的纯 JS 脚本，因此与链接重复略有不同

Answer 1

您可以在 Angular 中使用 jquery 来执行此操作。获得浏览器配置后。在应用程序组件中的 ngOnInit 上调用此方法

    SetApplicationFavicon(id,basepath,icon)
     { 
          $("#"+id).attr("href", basepath+"/"+icon); 
     }

Or you can even make use of Renderer 2 to change the attribute of the href tag at runtime either will work

.