logo标签列表

使用JavaScript或jQuery更改Chrome标签页颜色

javascriptandroidjquerygoogle-chromemeta-tags
18

在 Chrome 中，您可以使用 meta 标签来设置选项卡的颜色：

<meta name="theme-color" content="#FFA000">
在我的网站上，我有几个部分是按颜色编码的。为了使其看起来更好，我希望能够根据当前打开的部分动态更改选项卡的颜色。我已经尝试使用jQuery完成此操作:
$("meta[name='theme-color']").attr('content', '#455A64');

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

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

4
哇，我之前没有听说过“theme-color”（花了我一点时间才意识到你在谈论安卓Chrome）。 - Jeroen
我已经在本地进行了测试，但你发布的代码按照你的期望工作。你需要提供更多细节，以便我们能够重现你的问题。 - Jeroen
正如我在回答中所强调的，按照发布的代码应该是可以工作的。根据你的编辑，你仍然无法获得效果。你能否在你的设备上检查一下我回答中的plnkr链接是否可用？如果可用，那么可能是你的代码/应用程序中有一些特定的问题导致了这个问题。如果不可用，你可能需要提供你的设备详细信息以及Chrome/Android版本，因为我怀疑这可能是罪魁祸首。 - Jeroen
在Chrome v106中无法工作 <meta name="theme-color" content="#FFA000">。 - xjlin0
3个回答
21

对于从谷歌搜索原生JS解决方案而来的读者:

document.querySelector('meta[name="theme-color"]').setAttribute('content',  '#123456');
2
您的 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
但并不是所有的fiddle工具都允许你展示这种效果，因为使用iframes可能会妨碍你正确地复制它。不过我发现Plnkr确实可以工作。访问this demo Plnkr可以在上述设备上显示效果。
好吧，事实证明，在Chrome 44.x版本中它不起作用。我降级到39版本，现在它完美运行！ - Sir_baaron
1

事实证明，它不适用于Android Chrome版本43.x和44.x。在其他版本中，上面的所有代码都可以正常工作。在45.x版本中，它甚至从一种颜色淡入另一种颜色，看起来非常酷！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接