Dynamisches Favicon dynamisch mehrmals wechseln

Question

Ich benutze ein Benutzer-Skript (mit tampermonkey) auf einer Website, und ich habe eine Funktion, die jedes Mal aufgerufen wird, wenn sich etwas anderes auf der Seite ändert.

Ich habe einen Wert in etwas namens Available gespeichert. Wenn dies 0 ist, möchte ich das Standard-Favicon für die Site verwenden. Ansonsten möchte ich ein rotes Kästchen zum Favicon hinzufügen, das den Wert Available enthält.

Dies funktioniert zunächst, aber nach Available geht> 0, dann == 0, dann> 0 wieder, es hört auf, die rote Box mit weißem Text oben hinzuzufügen.

Der Code erreicht definitiv den Schlüsselpunkt jedes Mal, wie mein Konsolenprotokoll zeigt den Wert für Available wird ausgelöst.

Hier ist, was ich habe:

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

Sie höchstwahrscheinlich die zuvor hinzugefügt Symbol Links entfernen müssen, damit der Browser hält nicht nur die erste mit Ihnen hinzugefügt:

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 
}