在选项卡更改时更改图标

Question

我想在用户导航到另一个浏览器选项卡时更改我的网站图标和浏览器选项卡文本。有谁知道一个简单的方法来做到这一点？

Answer 1

使用 window.onblur 事件更改 document.title 和网站图标。在某些浏览器中更改网站图标可能很棘手。有关详细信息，请参阅 whosebug.com/questions/260857/changing-website-favicon-dynamically/260876#260876。

window.onblur=function(){
    //change favicon
    document.title="bye";
}
window.onfocus=function(){
    document.title="hello";
}

Answer 2

实现此目的的最简单方法是使用 javascript 检测选项卡是否处于活动状态：

How to tell if browser/tab is active

从您的 <head></head>

中的下一行开始

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

使用上面链接的 javascript 示例检查选项卡是否不再处于活动状态，将 href 更改为新的目录位置，就像使用 jquery.

一样

$("#changingFavicon").attr("href", "http://newlocation.com/favicon.png");

在选项卡更改时更改图标

Change Favicon on Tab Change

html

favicon