web-dev-qa-db-fra.com

Faire en sorte que le navigateur émette une notification

Pour des raisons de sécurité, mon site Web déconnecte automatiquement les utilisateurs après 5 minutes d'inactivité. J'y parviens grâce à des délais d'attente qui sont réinitialisés chaque fois que l'utilisateur fait ce que je considère comme une "activité". Pour garantir la sécurité, le délai d’expiration du cookie est également défini sur 5 minutes et jquery effectue une pulsation sur le serveur afin de s’assurer que le cookie n’expire pas.

Actuellement, après environ 4 minutes d'inactivité, une boîte de dialogue jquery ui apparaît pour avertir l'utilisateur de l'expiration du délai d'attente. L'utilisateur peut choisir de rester connecté, de se déconnecter maintenant ou de ne rien faire et il est obligé de se déconnecter à la fin des 5 minutes.

Mon problème est que je veux faire clignoter l'onglet avec une couleur d'arrière-plan différente pour avertir l'utilisateur que quelque chose se passe alors qu'il ne faisait pas attention. Je ne sais tout simplement pas comment s'y prendre.

jquerytabsbrowsernotifications
21
Josh

Vous pouvez changer le titre de la page (cela devrait aussi changer le texte dans l'onglet).

document.title = 'New title';

De plus, vous pouvez le faire dans une variable setInterval entre le titre de la page et les informations que vous essayez de montrer à l'utilisateur. J'ai constaté ce comportement sur gmail avec la communication par chat entrante.

23
Josiah Ruddell

Il n'est pas possible de modifier l'arrière-plan d'un onglet de navigateur, du moins pas de manière cohérente dans tous.

Comme Josiah l’a mentionné, setInterval peut être utilisé pour créer un titre de page clignotant.

Ce javascript en fait usage:

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;   
    }
}

Cela peut être utilisé comme:

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

Voir mon article de blog suivant pour plus d'informations:

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

16
Curt

vous pouvez changer le titre de la page et cela sera affiché dans l'onglet du navigateur, mais vous ne pouvez pas changer la couleur de fond ou le faire clignoter

1
hunter

Vous pouvez également ajouter une fenêtre alert . Lorsque l’utilisateur se trouve dans un autre onglet, le navigateur dispose d’une fonction intégrée permettant de faire clignoter les onglets (avec alerte). Donc, changer le titre du document avec une alerte servira votre but. Remarque: avant d'afficher une alerte, vous devez d'abord vérifier si l'onglet est actif.

0
Parish