Vue - 浏览器在线或离线时设置不同的图标 [英] Vue - Set different favicon when browser online or offline

问题描述

我正在尝试为浏览器在线(正常徽标)和离线(灰色徽标)设置不同的图标.我正在使用 Vue JS，我能够检测在线和离线设置，我也可以为不同的状态设置不同的图标，但离线图标不会显示，因为我的浏览器没有互联网来获取图标.

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

 handleConnectivityChange (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')}

解决方案

这有两个元素，预加载图标和动态设置它们.

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

data() {返回 {favicons: {}//我们需要存储图像以防止浏览器释放它们}},创建(){//这可以改进，但逻辑在这里//创建JS图像this.favicon = {'在线':新图像()，'离线':新图像()};//设置源属性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(状态){//获取或创建图标let link = document.querySelector("link[rel*='icon']") ||document.createElement('link');//设置图标的属性link.type = '图像/x 图标';link.rel = '快捷方式图标';链接.href = 状态?this.favicons.online.src : this.favicons.offline.src;//将 favicon 附加到 `head`document.getElementsByTagName('head')[0].appendChild(link);}

归功于:动态更改网站图标

作为旁注，这只是我的意见，如果您使用 Vue，我建议您放弃 jQuery.几乎不需要它，它只会增加开销.在此处的场景中，您可以非常轻松地使用 vanilla JS 来实现您所需要的，如示例所示...

I am trying to set different icons for when my browser is online(Normal logo) and offline(Greyed out logo). I am using Vue JS and I am able to detect online and offline set, I am also able to set different favicon for the different state but the offline icon won't show because my browser does not have internet to fetch the icon.

What is the best approach to achieve this? The code I am using is below, btw I am using 'v-offline' to detect online or offline states

    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')
    }

解决方案

There are two elements to this, preloading the favicons, and setting them dynamically.

The first part can be achieved in various ways. I would opt for the Vue created method as you could show a spinner on the page until the component is mounted. This would probably be better suited as a mixin, instead of directly on the component.

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

}

Then, to update the favicon, you can do something along the lines of the following:

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);
}

Credit to: Changing website favicon dynamically

As a side note, and this is just my opinion, I would advise dropping jQuery if you are using Vue. There is very little need for it and it just adds to the overhead. In the scenario here, you can very easily use vanilla JS to achieve what you need as the example demonstrates...

这篇关于Vue - 浏览器在线或离线时设置不同的图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！