在不刷新页面的情况下更新主题颜色元

Question

我不确定这是否可行；我们有各种主题颜色（颜色...），它们随每一页而变化。我们还利用了很多无需刷新页面的内容加载。

我想使用 chrome 移动浏览器中可用的主题颜色元标记来设置选项卡颜色。

由于我们的页面没有刷新，我希望这种颜色能反映新页面的背景色。我可以删除原始元并添加一个新元；

function updateMetaThemeColor(theme) {
    var themeColor;
    if(theme == 'theme-1') {
        themeColor = '#f4dcdc'
    } else if(theme == 'theme-2') {
        themeColor = '#f0e8dd';
    } else if(theme == 'theme-3') {
        themeColor = '#d5e7f0';
    } else if(theme == 'theme-4') {
        themeColor = '#f6efb9';
    } else if(theme == 'theme-5') {
        themeColor = '#eaeae8';
    } else if(theme == 'theme-6') {
        themeColor = '#f8e3c7';
    } else if(theme == 'theme-7') {
        themeColor = '#cde8e8';
    }

    //remove the current meta
    $('meta[name=theme-color]').remove();
    //add the new one
    $('head').append('<meta name="theme-color" content="'+themeColor+'">');
}

这确实有效，因为它删除并重建了元标记，但正如我担心的那样，此更改并未反映在 Chrome 移动浏览器的页面本身中。

有没有办法强制移动浏览器重新查找元标记并在必要时进行更改？

谢谢

Answer 1

实际上看起来上面的方法确实可以正常工作。我想我应该测试得更好，嗯。

Answer 2

你可以这样做

document.querySelector("meta[name='theme-color']").setAttribute("content", "<your-color>");

或

document.querySelector("meta[name='theme-color']").content = "<your-color>";

在不刷新页面的情况下更新主题颜色元

Update theme-color meta without page refresh

javascript

google-chrome

mobile

meta