2010-12-06 57 views
19

Pour des raisons de sécurité, mon site web bloque automatiquement les utilisateurs après 5 minutes d'inactivité. J'y parviens grâce à des délais d'attente jquery 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'attente du cookie est également défini sur 5 minutes. Mon jquery renvoie un signal de retour au serveur pour s'assurer que le cookie n'expire pas.Faire un onglet du navigateur Avertir une notification

Actuellement, à environ 4 minutes d'inactivité, une boîte de dialogue jquery-ui apparaît, avertissant l'utilisateur de son délai imminent. 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/clignoter l'onglet avec une couleur de fond différente pour avertir l'utilisateur que quelque chose se passe pendant qu'ils ne faisaient pas attention. Je ne suis pas sûr de savoir comment s'y prendre.

+0

Je ne pense pas qu'une page Web puisse interagir avec l'interface graphique d'un navigateur de cette manière, mais je suis curieux de voir si je me trompe à ce sujet. –

+0

J'ai vu des sites faire quelque chose qui provoque (dans IE) l'onglet pour changer de couleur. Je ne suis pas sûr de la façon dont ils y parviennent, et tous les exemples m'échappent maintenant. – Josh

+2

Ce n'est pas parce que c'est possible dans IE que cela devrait être autorisé. Un message clignotant, si la personne est à l'ordinateur, devrait être suffisant pour attirer l'attention (cela fonctionne certainement pour les alertes de chat sur Facebook). –

Répondre

22

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

document.title = 'New title'; 

De plus, vous pouvez le faire dans un setInterval et-vient entre le titre de la page et les informations que vous essayez de montrer à l'utilisateur. J'ai vu ce comportement sur gmail avec la communication par chat entrant.

+2

Je suis allé avec http://heyman.info/2010/sep/30/jquery-title-alert/ faire exactement ce que vous avez dit – Josh

1

vous pouvez modifier le titre de la page et qui montrera dans l'onglet du navigateur, mais vous ne pouvez pas changer la couleur de fond ou faire clignoter

+2

Eh bien, vous ** pouvez ** le faire clignoter si vous alternez le 'title' entre la chaîne de message et une chaîne vide ... mais, oui; changer la couleur et faire ce clignotement sont un non-non. –

11

Il n'est pas possible de modifier l'arrière-plan d'un onglet du navigateur, du moins pas de manière cohérente dans tous les cas. Comme Josiah l'a mentionné, setInterval peut être utilisé pour créer un titre de page clignotant.

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

Ceci peut être utilisé comme:

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

Voir mon blog suivant pour plus d'informations:

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

+1

J'aime vraiment ce code. Je l'ai combiné avec du code supplémentaire pour le rendre plus animé. – Dexter

+1

@Dexter Soins à partager? :) https://github.com/CurtTimson/Flashing-Page-Title-Notification – Curt

0

Vous peut également ajouter une alerte fenêtre. Lorsque l'utilisateur est dans un autre onglet, le navigateur a une fonction intégrée de clignotant les onglets (ayant alerte). Ainsi, 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.