faviconを前後に動的に変更する

Question

私はサイト上で（tampermonkeyを使用して）userscriptを実行しています。ページ上の何かが変わるたびに呼び出される関数があります。

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 
}