更新主题颜色元而不刷新页面答案

【问题标题】：Update theme-color meta without page refresh更新主题颜色元而不刷新页面
【发布时间】：2015-11-26 14:42:43
【问题描述】：

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

我想使用 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 移动浏览器上的页面本身中。

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

谢谢

【问题讨论】：

标签： javascript google-chrome mobile meta

【解决方案1】：

你可以这样做

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

或

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

【讨论】：

【解决方案2】：

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

【讨论】：

是的方法是正确的，我也有同样的测试问题，无论如何感谢您添加自己的答案来确认。