使浏览器选项卡闪烁通知

Question

出于安全原因，我的网站会在用户闲置 5 分钟后自动退出。我通过 jquery 超时来实现这一点，只要用户执行我认为的“活动”，这些超时就会重置。为保证安全，cookie的超时时间也设置为5分钟，我的jquery做心跳回服务器，保证cookie不会过期。

目前，在大约 4 分钟不活动时，会弹出一个 jquery ui 对话框，警告用户即将超时。用户可以选择保持登录状态、立即退出或什么都不做，然后在 5 分钟结束时强制退出。

我的问题是我想让标签闪烁/闪烁不同的背景颜色，以警告用户在他们没有注意的情况下正在发生某些事情。我只是不知道该怎么做。

Answer 1

您可以更改页面的标题（这也应该更改选项卡中的文本）。

document.title = 'New title';

此外，您可以在页面标题和您尝试向用户显示的信息之间来回使用setInterval。我在 gmail 上通过传入聊天通信看到了这种行为。

Answer 2

不可能更改浏览器选项卡的背景，至少不能始终一致。

正如 Josiah 所提到的，setInterval 可用于创建闪烁的页面标题。

这个 javascript 使用它：

var PageTitleNotification = {
    Vars:{
        OriginalTitle: document.title,
        Interval: null
    },    
    On: function(notification, intervalSpeed){
        var _this = this;
        _this.Vars.Interval = setInterval(function(){
             document.title = (_this.Vars.OriginalTitle == document.title)
                                 ? notification
                                 : _this.Vars.OriginalTitle;
        }, (intervalSpeed) ? intervalSpeed : 1000);
    },
    Off: function(){
        clearInterval(this.Vars.Interval);
        document.title = this.Vars.OriginalTitle;   
    }
}

这可以像这样使用：

PageTitleNotification.On("User logged out!");

有关更多信息，请参阅我的以下博客文章：

http://curtistimson.co.uk/js/create-a-flashing-tab-notification-page-title/

Answer 3

您还可以添加一个警报窗口。当用户在另一个选项卡中时，浏览器具有闪烁选项卡的内置功能（具有警报）。因此，更改文档标题以及警报将满足您的目的。注意：在显示警报之前，您需要先检查选项卡是否处于活动状态。

Answer 4

您可以更改页面标题并将其显示在浏览器选项卡中，但您无法更改背景颜色或使其闪烁