Change Chrome colore scheda con JavaScript o jQuery

In Chrome è possibile impostare il colore di una scheda con la linguetta metaChange Chrome colore scheda con JavaScript o jQuery

<meta name="theme-color" content="#FFA000">

Nel mio sito ho diverse sezioni color-coded. Per farlo sembrare migliore, vorrei cambiare dinamicamente il colore della scheda in base alla sezione attualmente aperta. Ho provato a farlo con jQuery:

$("meta[name='theme-color']").attr('content', '#455A64');

Ma non funziona. Sarei molto felice se qualcuno potesse dirmi se/come puoi modificare questo valore meta durante il runtime.

Modifica: dopo alcuni controlli ho notato che il codice cambia il contenuto del metatag, ma Chrome non aggiorna il colore della scheda.

fonte

2015-08-28 Sir_baaron

Wow, non avevo sentito parlare di 'tema-color' prima (e mi ha portato un secondo per rendersi conto che si sta parlando su * Android * Chrome). – Jeroen

Ho provato localmente, ma il codice che hai pubblicato funziona come previsto. Dovrai aggiungere ulteriori dettagli in modo che possiamo riprodurre il tuo problema. – Jeroen

Come ho cercato di evidenziare con la mia risposta, il codice pubblicato dovrebbe funzionare. Data la tua modifica hai ancora problemi a ottenere l'effetto. Puoi controllare sul tuo dispositivo se il link plnkr della mia risposta funziona per te? Se lo fa, probabilmente c'è qualcosa di specifico nel tuo codice/app che causa problemi. In caso contrario, potrebbe essere necessario includere i dettagli del dispositivo e le versioni di Chrome/Android, poiché sospetterei che sia il colpevole. – Jeroen

Il codice jQuery è corretto. Se si vuole sfarfallare la barra del titolo e guidare gli utenti fuori, provate questo:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Unicorns!</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 
    <meta name="theme-color" content="#FF0000">  
</head> 
<body> 
    <h1>Unicorns are <b id="x">#FF0000</b></h1> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script> 
     $(function() { 
      var i = 0; 
      var colors = ["#FF0000", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF"]; 
      setInterval(function() { 
       var color = colors[i = i++ > 4 ? 0 : i]; 
       $("meta[name='theme-color']").attr('content', color); 
       $("#x").text(color); 
      }, 500); 
     }); 
    </script> 
</body> 
</html>

Ho provato questo sul mio Nexus 5 con Chrome 40.0.2214.89 e Android versione 5.1.1, e visto il lavoro. Non sono sicuro di cosa pensare di questo tipo di funzionalità, tuttavia ...: P

Non tutti gli strumenti di violino ti permetteranno di mostrare l'effetto, perché penso che l'uso di iframe possa impedirti di riprodurlo correttamente. Ho trovato che Plnkr ha funzionato comunque. Visitare this demo Plnkr ha mostrato l'effetto sul dispositivo sopra menzionato.

fonte

2015-08-28 11:37:29 Jeroen

Bene, risulta che non funziona in Chrome versione 44.x Ho eseguito il downgrade alla versione 39 e ora funziona perfettamente! –

Risulta, non funziona con Android versioni di Chrome 43.x & 44.x. In altre versioni tutto il codice sopra funziona. Nella versione 45.x si dissolve persino da un colore all'altro, rendendolo davvero fantastico!

fonte

2015-09-05 20:10:28

Per questo che sbarcano su questa pagina da Google alla ricerca di una soluzione alla vaniglia JS:

document.querySelector('meta[name="theme-color"]').setAttribute('content', '#123456');

fonte

2018-02-13 20:15:45 WyriHaximus

Change Chrome colore scheda con JavaScript o jQuery

risposta

Problemi correlati