Question

谢谢你的期待。在大多数浏览器中，我的favicon在选择标签时具有高对比度（看起来不错）但在未选择标签时具有低对比度（难以看清）。

大多数浏览器是否存在某种“钩子”，可以告诉我何时我的页面不是活动标签，以便我可以切换到更高对比度的图标，然后在标签处于活动状态时切换回常规浏览器？

Answer 1

要执行此操作，您将使用窗口的焦点和模糊事件。

$(window).focus(function() {
    var link = document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.stackoverflow.com/favicon.ico';
    document.getElementsByTagName('head')[0].appendChild(link);
});

$(window).blur(function() {
    var link = document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.stackoverflow.com/favicon.ico';
    document.getElementsByTagName('head')[0].appendChild(link);
});

或者使用更短的以及以下用于favicon的HTML

<link id="favicon" rel="shortcut icon" type="image/png" href="favicon.png" />

$(window).focus(function() {
    $("#favicon").attr("href","favicon1.png");
});

$(window).blur(function() {
    $("#favicon").attr("href","favicon2.png");
});

Answer 2

最简单的方法

    var fi = document.getElementById("favicon"); 

      window.onfocus=function(){
        fi.setAttribute("href", "favicon-1.jpg");
      }

      window.onblur=function(){
        fi.setAttribute("href", "favicon-2.png");
      }

<link id="favicon" rel="shortcut icon" type="image/png" href="favicon-1.png" />

如何根据浏览器选项卡的状态动态更改我的图标？

2 个答案: