多次來回動態改變圖標

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 
}