无需页面刷新即可更新主题颜色元

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>";