无法使用JavaScript更新收藏夹图标以使其旋转

Question

I'm following a blog on how to animate favicon . 我正在关注有关如何为favicon设置动画的博客。 I didn't get it to work, so I've broken it down into several pieces, concluding that the issue is that I'm not updating the favicon with the generated data. 我没有使其正常工作，因此将其分为几部分，得出的结论是我没有使用生成的数据更新该图标。

The console tells me that favicon is not defined and the assignment fails. 控制台告诉我未定义favicon，并且分配失败。

<!doctype html>
<html lang="en">
<head>
  <base href="/">
  <!-- <link rel="icon" type="image/x-icon" href="favicon.ico"> -->
  <link rel="icon" type="image/png" href="" width=32px>
</head>

<script>
  window.onload = function () {
    const canvas = document.querySelector('canvas');
    const context = canvas.getContext('2d');
    if (!!context) {
      context.clearRect(0, 0, 32, 32);
      context.beginPath();
      context.moveTo(0, 0); context.lineTo(0, 32);
      context.moveTo(0, 0); context.lineTo(32, 32);
      context.stroke();
      const data = canvas.toDataURL("image/png");
      console.log(data);
      favicon.href = data;
    }
  };</script>

<body>
  <canvas width="32" height="32"></canvas>
  <app-root>Loading...</app-root>
</body>

</html>

I can see that the data appears in the console (assuming that it's the proper junk of info). 我可以看到数据出现在控制台中（假设这是适当的信息垃圾）。 However, the next line fails to execute. 但是，下一行无法执行。 There's nothing in the blog about how favicon is defined and I wonder if it might be doable only in certain browsers/plattforms? 博客中没有关于favicon的定义的任何信息，我想知道它是否仅在某些浏览器/平台中才可行？

Answer 1

it needs to be a reference to the favicon link: 它必须是对favicon链接的引用：

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

Create a reference to it in javascript: 在javascript中创建对它的引用：

const favicon = document.getElementById('favicon');

无法使用JavaScript更新收藏夹图标以使其旋转

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-08-19 16:53:16

无法使用JavaScript更新收藏夹图标以使其旋转

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-08-19 16:53:16

解决方案1
1 已采纳 2019-08-19 16:53:16