让浏览器选项卡闪烁通知

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

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