多次来回动态改变图标

Question

我在网站上运行一个userscript（使用tampermonkey），并且我有一个函数，每当页面上的其他内容发生变化时都会调用它。

我有一个值存储在一个叫Available的东西。如果这是0，那么我想使用该网站的标准图标。否则，我需要在favicon中添加一个红色框，其文本显示的值为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 
}