Question

我正在尝试为浏览器处于联机状态（普通徽标）和脱机状态（灰色徽标）设置不同的图标。我正在使用Vue JS，并且能够检测在线和离线设置，也可以针对不同的状态设置不同的图标，但由于我的浏览器没有互联网可获取图标，因此无法显示离线图标。

实现此目标的最佳方法是什么？我正在使用的代码如下，顺便说一句，我正在使用“ v-offline”来检测在线或离线状态

    handleConnectivityChange (status) {
      status ? $('#favicon').attr('href', 'https://snackify-cdn.sfo2.digitaloceanspaces.com/favicon-on.png') : $('#favicon').attr('href', 'https://snackify-cdn.sfo2.digitaloceanspaces.com/favicon-off.png')
    }

Answer 1

这有两个要素，预加载图标，然后动态设置它们。

第一部分可以通过多种方式实现。我会选择Vue created方法，因为您可以在页面上显示微调框，直到组件为mounted。这可能更适合作为混合，而不是直接在组件上。

data() {
    return {
        favicons: {} // we need to store the images to prevent the browser releasing them
    }
},

created () {

    // This can be improved but the logic is here

    // Create the JS images
    this.favicons = {
        'online': new Image(),
        'offline': new Image()
    };

    // Set the source properties
    this.favicons.online.src = 'https://snackify-cdn.sfo2.digitaloceanspaces.com/favicon-on.png';
    this.favicons.offline.src = 'https://snackify-cdn.sfo2.digitaloceanspaces.com/favicon-off.png';

}

然后，要更新收藏夹图标，可以执行以下操作：

handleConnectivityChange (status) {

    // Get or create the favicon
    let link = document.querySelector("link[rel*='icon']") || document.createElement('link');

    // Set the attributes of the favicon
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = status ? this.favicons.online.src : this.favicons.offline.src;

    // Append the favicon to the `head`
    document.getElementsByTagName('head')[0].appendChild(link);
}

信用至：Changing website favicon dynamically

作为旁注，这只是我的看法，如果您使用的是Vue，建议您删除jQuery。几乎不需要它，这只会增加开销。在这里的场景中，您可以非常轻松地使用香草JS来实现所需的功能，如示例所示。. 。

Vue-在线或离线浏览器时设置不同的图标

1 个答案: