使用 JavaScript 或 jQuery 更改 Chrome 选项卡颜色答案

【问题标题】：Change Chrome tab color with JavaScript or jQuery使用 JavaScript 或 jQuery 更改 Chrome 选项卡颜色
【发布时间】：2015-11-23 00:55:12
【问题描述】：

在 Chrome 中，您可以使用元标记设置标签的颜色：

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

在我的网站中，我有几个部分用颜色编码。为了让它看起来更好，我想根据当前打开的部分动态更改选项卡的颜色。我试过用 jQuery 来做：

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

但它不起作用。如果有人能告诉我是否/如何在运行时更改此元值，我将非常高兴。

编辑：经过一些检查，我注意到代码确实更改了元标记内容，但 Chrome 并未更新选项卡颜色。

【问题讨论】：

哇，之前没听说过theme-color（我花了一秒钟才意识到你说的是Android Chrome）。
我已经在本地进行了测试，但是您发布的代码可以按预期工作。您需要添加更多详细信息，以便我们重现您的问题。
正如我试图用我的答案强调的那样，发布的代码应该可以工作。鉴于您的编辑，您仍然无法获得效果。如果我的答案中的 plnkr 链接对您有用，您可以检查您的设备吗？如果是这样，那么可能是您的代码/应用程序特有的东西会导致问题。如果没有，您可能需要包括您的设备详细信息和 Chrome / Android 版本，因为我怀疑这是罪魁祸首。

标签： javascript android jquery google-chrome meta-tags

【解决方案1】：

对于那些从谷歌登陆此页面并寻找普通 JS 解决方案的人：

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

【讨论】：

【解决方案2】：

事实证明，它不适用于 android Chrome 版本 43.x 和 44.x。在其他版本中，上述所有代码都有效。在 45.x 版本中，它甚至会从一种颜色变为另一种颜色，看起来非常酷！

【讨论】：

【解决方案3】：

您的 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

不是所有的小提琴工具都可以让你展示效果，因为我认为使用 iframe 可能会阻止你正确复制它。我发现 Plnkr 确实有效。访问this demo Plnkr可以看到上述设备的效果。

【讨论】：

好吧，事实证明，它在 Chrome 版本 44.x 中不起作用我降级到版本 39，现在它可以完美运行了！