gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 23:06:35 25 4
gpt4 key购买 nike

我正在关注 how to animate favicon 上的博客。我没有让它工作,所以我把它分成几个部分,得出的结论是问题是我没有用生成的数据更新图标。

控制台告诉我 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>

我可以看到数据出现在控制台中(假设它是正确的信息垃圾)。但是,下一行无法执行。博客中没有任何关于如何定义 favicon 的内容,我想知道它是否只能在某些浏览器/平台中使用?

最佳答案

它需要是对网站图标链接的引用:

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

在 JavaScript 中创建对其的引用:

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

关于javascript - 无法使用 JavaScript 更新网站图标以使其旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57560873/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com