javascript - 如何刷新 Apple 移动网络应用程序状态栏样式元标记？

Question

我的目标是允许用户在深色模式和浅色模式之间切换。当他们做出选择时，我想将元标记从 default 更改为 black，反之亦然。

目前，我有服务器端代码，可以根据用户对深色模式或浅色模式的偏好来呈现 apple-mobile-web-app-status-bar-style 元标记。当用户更改模式时，会提交表单并使用新样式刷新页面，因为我在服务器上呈现应用的类名称。例如在灯光模式下，我可能会有这样的东西。

<meta name="apple-mobile-web-app-status-bar-style" content="default" id="status-bar-style">
...
<div class="bg-blue-light"></div>

在黑暗模式下，服务器将返回类似这样的内容。

<meta name="apple-mobile-web-app-status-bar-style" content="black" id="status-bar-style">
...
<div class="bg-blue-dark"></div>

当用户使用独立 Web 应用程序时，就会出现问题。元标记似乎已被缓存。无论我做什么，状态栏都不会改变，除非用户重新下载网络应用程序。我尝试过使用 javascript 来替换元标记并重新加载页面，但这也不起作用。

那么如何在网络应用程序内动态更改 apple-mobile-web-spp-status-bar-style 元标记？

Answer 1

我不确定这是否可以编程工作，但是您可以将状态栏设置为半透明

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

并指定一个可以自动更改的主题颜色，经过测试并可在 iphone6s safari 上使用

 <meta name="theme-color" content="#ffd5f5">

并使用javascript自动更改主题颜色

function changeThemeColor(color) {
    let currentTheme = $('body').hasClass('theme-light') ? 'light' : 'dark';
    let metaThemeColor = document.querySelector("meta[name=theme-color]");  
    if(currentTheme === 'light'){
        metaThemeColor.setAttribute("content",color);                    
    }
    else{
        metaThemeColor.setAttribute("content","#21252a");
    }                       

}
// Can be called on button click and/or page load,