來回動態更改favicon多次

Question

我正在網站上運行用戶腳本（使用tampermonkey），並且每次頁面上其他內容發生更改時都會調用該函數。

我有一個存儲在名為Available的值。 如果該值為0，那么我要對該網站使用標准圖標。 否則，我希望將紅色框添加到收藏夾圖標，並在其中顯示顯示Available值的文本。

最初可以使用，但是在Available變為> 0，然后== 0，然后再次> 0之后，它將停止添加頂部帶有白色文本的紅色框。

每次，代碼肯定到達了關鍵點，因為我的控制台日志顯示了Available的值正在被觸發。

這是我所擁有的：

if(Available > 0){
    var canvas = document.createElement('canvas');
    canvas.width = 16;canvas.height = 16;
    var ctx = canvas.getContext('2d');

    var img = new Image();
    img.src = '/favicon.ico';
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        ctx.fillStyle = "#F00";
        ctx.fillRect(10, 7, 6, 8);
        ctx.fillStyle = '#FFFFFF';
        ctx.font = 'bold 10px sans-serif';
        ctx.fillText(Available, 10, 14);

        var link = document.createElement('link');
        link.type = 'image/x-icon';
        link.rel = 'shortcut icon';
        link.href = canvas.toDataURL("image/x-icon");
        document.getElementsByTagName('head')[0].appendChild(link);
    };
}
else {
    var canvas2 = document.createElement('canvas');
    canvas2.width = 16;
    canvas2.height = 16;
    var ctx2 = canvas2.getContext('2d');

    var img2 = new Image();
    img2.src = '/favicon.ico';
    img2.onload = function() {
        ctx2.drawImage(img2, 0, 0);

        var link2 = document.createElement('link');
        link2.type = 'image/x-icon';
        link2.rel = 'shortcut icon';
        link2.href = canvas2.toDataURL("image/x-icon");
        document.getElementsByTagName('head')[0].appendChild(link2);
    };
}

Answer 1

您很可能需要刪除以前添加的圖標鏈接，因此瀏覽器不僅會繼續使用添加的第一個圖標：

var oldLinks = document.querySelectorAll('link[rel*="icon"]');

for (var i = oldLinks.length - 1; i >= 0; --i) {
  var ln = oldLinks[i],
      pn = ln.parentNode;

  pn.removeChild(ln);
}

if (Available > 0) {
  // as before
}