为了账号安全,请及时绑定邮箱和手机立即绑定

无法使用 JavaScript 更新网站图标以使其旋转

无法使用 JavaScript 更新网站图标以使其旋转

www说 2021-09-17 10:08:03
我正在关注一个关于如何为 favicon 制作动画的博客。我没有让它工作,所以我把它分解成几个部分,得出的结论是问题是我没有用生成的数据更新网站图标。控制台告诉我 favicon 未定义且分配失败。<!doctype html><html><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>我可以看到数据出现在控制台中(假设它是正确的信息垃圾)。但是,下一行无法执行。博客中没有关于favicon是如何定义的,我想知道它是否仅适用于某些浏览器/平台?
查看完整描述

1 回答

?
qq_笑_17

TA贡献1818条经验 获得超7个赞

它需要是对 favicon 链接的引用:

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

在 javascript 中创建对它的引用:

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


查看完整回答
反对 回复 2021-09-17
  • 1 回答
  • 0 关注
  • 150 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信