js操作浏览器选项卡_如何在浏览器选项卡中显示更新通知

daique1908

墨衍会员 · 1平台 · 400+阅读码龄10年

关注

翻译最新推荐文章于 2026-08-16 14:58:55 发布 431 阅读 AI 写同款· GEO 优化 ›

量大管饱性价比拉满！GLM系列套餐，限时限量特惠，满足你的编程，低至39元起！

抢先体验

js操作浏览器选项卡

具有频繁更新内容的网站和Web应用程序必须找出一种方法来吸引用户的注意力，以将更新告知用户，尤其是在用户可能离开了该网站或应用程序处于活动状态的选项卡的地方。

您会在野外看到几种常见的模式。诸如Facebook，Twitter和LinkedIn的社交网站可能每隔几秒钟就会收到新内容，因此将相关数字插入页面标题中，以在选项卡中显示新更新的数量。另一方面，Trello在该图标上显示了一个红色的小徽章。

在本教程中，我们将复制这种形式的反馈设计，利用浏览器选项卡作为通知用户更新的媒介。查看演示，然后看看它是如何完成的。

使用文件标题

我们将在页面标题后添加新更新的数量，类似于Facebook和Twitter的做法。

在现实世界中，我们可能会以多种方式检索数据（与友好的开发人员联系）。在这种情况下，我们假设已经获取了更新数量，并且可以使用该数字在JavaScript中玩游戏。目前，似乎我们当前的更新为零，因此我们将该数字传递给变量：

var count = 0;

接下来是我们代码的内容，我们将在其中更改文档标题。首先，我们添加document.title ，它将检索我们当前的文档标题：

var title = document.title;

然后，我们创建一个新函数来更改该标题中的字符串：

function changeTitle() {
	count++;
	var newTitle = '(' + count + ') ' + title;
	document.title = newTitle;
}

在这里您可以看到我们使用了JavaScript ++运算符。出于演示的目的， ++将每次迭代的count增加1 。当我们从0开始时，下一次迭代将返回1 。我们使用++运算符来模拟数字增量，因为我们无权使用API向我们提供实数。

接下来，我们创建另一个新函数，它将运行changeTitle()函数：

function newUpdate() {
	update = setInterval(changeTitle, 2000);
}
var docBody = document.getElementById('site-body');
docBody.onload = newUpdate;

上面的函数假定我们需要每2000毫秒（2秒）检查一次新更新。我们的函数changeTitle()将在该间隔内连续运行。页面加载后，我们将立即运行此功能。

第一种方法非常简单。我们检索数字并将其传递给标题。您可以通过在changeTitle()函数中将数字括起来的括号从( )更改为[ ]或{ } 。

使用Favicon

现在，我们将尝试第二种方法，即像Trello Web应用程序一样更改图标图标 。为此，我们需要准备两个favicon变体，其中第二个变体是每当我们收到新更新时将显示的替代物。

首先链接文档中的第一个图标。

<link id="favicon" rel="icon" href="img/favicon.gif?v3"/>

然后在JavaScript变量中设置新图标的路径。

var iconNew = 'img/favicon-dot.gif';

与第一种方法一样，我们还将创建两个函数：

function changeFavicon() {
	document.getElementById('favicon').href = iconNew;
}
function newUpdate() {
	update = setInterval(changeFavicon, 3000);
	setTimeout(function() { 
		clearInterval( update ); 
	}, 3100);
}

var docBody = document.getElementById('site-body');
docBody.onload = newUpdate;

第一个功能changeFavicon()会将我们的初始图标替换为带有红色徽章的图标。第二个函数newUpdate()将在指定时间内执行第一个函数。

第二种方法并不像您最初想的那么复杂。实际上，它比我们更新页面标题字符串的第一个简单。此外，我们可以将更多的创造力注入到替代图标中。例如，我们可以使红色标志闪烁而不是静止（现在要小心。），或者更改整个图标的颜色和图标。

注意：Chrome不支持带有动画GIF的网站图标。

使用Favico.js

最后，我们现在将使用由Miroslav Magda开发JavaScript库Favico.js 。该库提供了一个方便的API，其中包含大量的选项来更改图标，例如一起显示徽章和更新次数。

首先，使用JavaScript定义一个新的Favico实例，该实例定义徽章的位置，动画，背景颜色以及文本颜色。

var favicon = new Favico({
	position  :'up',
	animation :'popFade',
	bgColor   :'#dd2c00',
	textColor :'#fff0e2'
});

然后，我们添加了几个函数来运行此新实例，并最终在网站图标中显示徽章。

var num = 0;
function generateNum() {
	num++;
	return num;
}

function showFaviconBadge() {
	var num = generateNum();
	favicon.badge(num);	
}

function newUpdate() {
	update = setInterval(showFaviconBadge, 2000);
}

var docBody  = document.getElementById('site-body');
docBody.onload = newUpdate;

该代码有点像我们之前做的第一个方法。我们从创建函数开始，该函数将模拟将在徽章中显示的更新数量。第二个函数showFaviconBadge() ，是将数字插入徽章中，并在showFaviconBadge()显示徽章。最后一个函数newUpdate()将在指定的时间间隔内运行第二个函数，使我们有一种接收新更新的感觉。