javascript - Update theme-color meta without page refresh - Stack Overflow

admin管理员组

文章数量:1302329

I am unsure whether this is possible; we have various theme colors (colours...) and they change with each page. We are also utilising a lot of content loading without page refreshes.

I want to use the theme-color meta tag that is available in in chrome mobile browsers to set the tab colour.

As our pages do not refresh, i would like this color to reflect the new page background colour. I can remove the original meta and add a new with the following;

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+'">');
}

This does work, in that it removes and reconstructs the meta tag, but as i feared, this change is not reflected in the page itself on Chrome mobile browser.

Is there a way to force the mobile browser to have another look for the meta tag and change when necessary?

Thanks

I am unsure whether this is possible; we have various theme colors (colours...) and they change with each page. We are also utilising a lot of content loading without page refreshes.

I want to use the theme-color meta tag that is available in in chrome mobile browsers to set the tab colour.

As our pages do not refresh, i would like this color to reflect the new page background colour. I can remove the original meta and add a new with the following;

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+'">');
}

This does work, in that it removes and reconstructs the meta tag, but as i feared, this change is not reflected in the page itself on Chrome mobile browser.

Is there a way to force the mobile browser to have another look for the meta tag and change when necessary?

Thanks

• javascript
• google-chrome
• mobile
• meta

Share Follow asked Sep 1, 2015 at 11:20 AlexAlex 2,06344 gold badges1919 silver badges3333 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You can do it like this

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

or

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

It actually looks like the approach above does work exactly as it should. Guess i should test better, huh.

本文标签： javascriptUpdate themecolor meta without page refreshStack Overflow