Question

Comment faire clignoter/mettre en surbrillance le navigateur d'un utilisateur dans la barre des tâches à l'aide de JavaScript ?Par exemple, si je fais une requête AJAX toutes les 10 secondes pour voir si l'utilisateur a de nouveaux messages sur le serveur, je veux que l'utilisateur le sache immédiatement, même s'il utilise une autre application à ce moment-là.

Modifier:Ces utilisateurs veulent être distraits lorsqu'un nouveau message arrive.

Était-ce utile?

La solution

cela ne fera pas clignoter le bouton de la barre des tâches avec des couleurs changeantes, mais le titre clignotera jusqu'à ce qu'ils bougent la souris.Cela devrait fonctionner sur plusieurs plates-formes, et même s'ils l'ont simplement dans un onglet différent.

newExcitingAlerts = (function () {
    var oldTitle = document.title;
    var msg = "New!";
    var timeoutId;
    var blink = function() { document.title = document.title == msg ? ' ' : msg; };
    var clear = function() {
        clearInterval(timeoutId);
        document.title = oldTitle;
        window.onmousemove = null;
        timeoutId = null;
    };
    return function () {
        if (!timeoutId) {
            timeoutId = setInterval(blink, 1000);
            window.onmousemove = clear;
        }
    };
}());

Mise à jour:Vous voudrez peut-être envisager d'utiliser Notifications HTML5.

Autres conseils

j'ai fait un plugin jQuery dans le but de faire clignoter les messages de notification dans la barre de titre du navigateur.Vous pouvez spécifier différentes options telles que l'intervalle de clignotement, la durée, si le clignotement doit s'arrêter lorsque la fenêtre/l'onglet est mis au point, etc.Le plugin fonctionne dans Firefox, Chrome, Safari, IE6, IE7 et IE8.

Voici un exemple d'utilisation :

$.titleAlert("New mail!", {
    requireBlur:true,
    stopOnFocus:true,
    interval:600
});

Si vous n'utilisez pas jQuery, vous souhaiterez peut-être quand même consulter le code source (il y a quelques bugs bizarres et cas extrêmes que vous devez contourner lorsque vous faites clignoter le titre si vous souhaitez prendre pleinement en charge tous les principaux navigateurs).

Soi-disant, vous pouvez le faire sur Windows avec l'API javascript Growl pour Windows :

http://ajaxian.com/archives/growls-for-windows-and-a-web-notification-api

Vos utilisateurs devront cependant installer Growl.

À terme, cela fera partie de Google Gears, sous la forme de NotificationAPI :

http://code.google.com/p/gears/wiki/NotificationAPI

Je recommanderais donc d'utiliser l'approche Growl pour l'instant, de revenir aux mises à jour des titres de fenêtre si possible, et déjà d'essayer d'utiliser l'API de notification Gears, pour le moment où elle sera finalement disponible.

Ma réponse "interface utilisateur" est la suivante :Es-tu sûr vos utilisateurs veulent que leurs navigateurs clignotent, ou le font tu penses c'est ce qu'ils veulent ?Si c'était moi qui utilisais votre logiciel, je sais que je serais ennuyé si ces alertes se produisaient très souvent et me gênaient.

Si vous êtes sûr de vouloir procéder de cette façon, utilisez une boîte d'alerte javascript.C'est ce que fait Google Agenda pour les rappels d'événements, et ils y ont probablement réfléchi.

Une page Web n’est vraiment pas le meilleur support pour les alertes nécessaires.Si vous concevez quelque chose dans le sens de "Zomg, les serveurs sont en panne!" Des alertes, des e-mails automatisés ou des SMS aux bonnes personnes peuvent faire l'affaire.

La seule façon pour moi de procéder est de faire quelque chose comme alert('you have a new message') lorsque le message est reçu.Cela fera clignoter la barre des tâches si la fenêtre est réduite, mais cela ouvrira également une boîte de dialogue, ce que vous ne souhaiterez peut-être pas.

Pourquoi ne pas adopter l'approche utilisée par GMail et afficher le nombre de messages dans le titre de la page ?

Parfois, les utilisateurs ne veulent pas être distraits lorsqu'un nouveau message arrive.

                var oldTitle = document.title;
                var msg = "New Popup!";
                var timeoutId = false;

                var blink = function() {
                    document.title = document.title == msg ? oldTitle : msg;//Modify Title in case a popup

                    if(document.hasFocus())//Stop blinking and restore the Application Title
                    {
                        document.title = oldTitle;
                        clearInterval(timeoutId);
                    }                       
                };

                if (!timeoutId) {
                    timeoutId = setInterval(blink, 500);//Initiate the Blink Call
                };//Blink logic 

Vous voudrez peut-être essayer window.focus() - mais cela peut être ennuyeux si l'écran change

vous pouvez changer le titre de la page Web à chaque nouveau message pour alerter l'utilisateur.J'ai fait cela pour un client de chat sur navigateur et la plupart des utilisateurs ont pensé que cela fonctionnait assez bien.

document.title = "[user] hello world";

AFAIK, il n'y a pas de bon moyen de le faire avec cohérence.J'écrivais un client de messagerie instantanée basé sur le Web uniquement sur IE.Nous avons fini par utiliser window.focus(), qui fonctionne la plupart du temps.Parfois, la fenêtre détourne le focus de l'application de premier plan, ce qui peut être très ennuyeux.

Ces utilisateurs veulent être distraits lorsqu'un nouveau message arrive.

On dirait que vous écrivez une application pour un projet interne à l'entreprise.

Vous voudrez peut-être étudier l'écriture d'une petite application Windows dans .net qui ajoute une icône de notification et peut ensuite créer des fenêtres contextuelles sophistiquées ou des fenêtres contextuelles de ballon ou autre, lorsqu'ils reçoivent de nouveaux messages.

Ce n'est pas trop difficile et je suis sûr que si vous demandez à SO "comment afficher une icône dans la barre d'état" et "comment puis-je faire des notifications contextuelles", vous obtiendrez d'excellentes réponses :-)

Pour mémoire, je suis presque sûr que (à part utiliser une boîte de dialogue d'alerte/invite), vous ne pouvez pas flasher la barre des tâches dans JS, car elle est fortement spécifique à Windows, et JS ne fonctionne vraiment pas comme ça.Vous pourrez peut-être utiliser certains contrôles ActiveX Windows spécifiques à IE, mais vous infligerez ensuite IE à vos pauvres utilisateurs.Ne fais pas ça :-(

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top