Изменить цвет вкладки Chrome с помощью JavaScript или jQuery

В Chrome вы можете установить цвет вкладки с вкладкой мета

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

На моем сайте есть несколько разделов с цветовой кодировкой. Чтобы он выглядел лучше, я бы хотел динамически изменять цвет вкладки в соответствии с открытым в данный момент разделом. Я попытался сделать это с помощью jQuery:

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

Но это не работает. Я был бы очень рад, если бы кто-нибудь сказал мне, если / как вы можете изменить это мета-значение во время выполнения.

Редактировать: после некоторых проверок я заметил, что код изменяет содержимое метатега, но Chrome не обновляет цвет вкладки.

Источник

3 ответа

Для тех, кто попадает на эту страницу от Google, ищет ванильное решение JS:

document.querySelector('meta[name="theme-color"]').setAttribute('content',  '#123456');
Источник

Ваш код JQuery правильный. Если вы хотите мерцать строку заголовка и отвлечь пользователей, попробуйте это:

<!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>

Я протестировал это на своем Nexus 5 с Chrome 40.0.2214.89 и Android версии 5.1.1, и увидел, что он работает. Не уверен, что думать об этом типе функции, хотя...:P

Не все инструменты скрипки позволят вам показать эффект, потому что я думаю, что использование iframes может помешать вам правильно воспроизвести его. Я обнаружил, что Plnkr действительно работал. Посещение этой демонстрации Plnkr показало влияние на вышеупомянутые устройства.

Источник

Оказывается, он не работает с Android-версиями Chrome 43.x & 44.x. В других версиях весь вышеуказанный кодекс работает. В версии 45.x он даже выцветает от одного цвета к другому, что делает его действительно классным!

Источник
Другие вопросы по тегам