Faire clignoter la fenêtre du navigateur dans la barre des tâches
Comment faire clignoter/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 tout de suite, même s'il utilise une autre application à ce moment-là.
Edit: ces utilisateurs veulent être distraits lorsqu'un nouveau message arrive.
11 réponses
Cela ne fera pas clignoter le bouton de la barre des tâches en changeant de couleur, mais le titre clignotera et s'éteindra jusqu'à ce qu'il déplace la souris. Cela devrait fonctionner multi-plateforme, et même s'ils l'ont juste 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 utiliser les notifications HTML5.
J'ai créé un plugin jQuery dans le but de clignoter des messages de notification dans la barre de titre du navigateur. Vous pouvez spécifier différentes options comme l'intervalle de clignotement, la durée, si le clignotement doit s'arrêter lorsque la fenêtre / l'onglet est focalisé, etc. Le plugin fonctionne dans Firefox, Chrome, Safari, IE6, IE7 et IE8.
Voici un exemple sur la façon de l'utiliser:
$.titleAlert("New mail!", {
requireBlur:true,
stopOnFocus:true,
interval:600
});
Si vous n'utilisez pas jQuery, vous pouvez toujours regarder le code source (Il y a quelques bugs bizarres et les cas de bord que vous devez contourner lorsque vous faites le clignotement du titre si vous voulez prendre 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.
Finalement, cela va faire partie de Google gears, sous la forme de NotificationAPI:
Http://code.google.com/p/gears/wiki/NotificationAPI
Je recommande donc d'utiliser l'approche growl pour l'instant, en revenant à mise à jour du titre de la fenêtre si possible, et déjà l'ingénierie dans les tentatives d'utiliser L'API de notification Gears, pour quand il devient finalement disponible.
Ma réponse" interface utilisateur " est la suivante: êtes-vous sûr que vos utilisateurs veulent que leur navigateur clignote, ou faites vous pensez que c'est ce qu'ils veulent? Si j'étais celui qui utilise 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 le faire de cette façon, utilisez une boîte d'alerte javascript. C'est ce que Google Agenda fait pour les rappels d'événements, et ils y ont probablement réfléchi.
Une page web n'est vraiment pas la meilleure moyen pour les alertes de besoin de savoir. Si vous concevez quelque chose dans le sens de "ZOMG, les serveurs sont en panne!"des alertes, des e-mails automatisés ou des messages SMS aux bonnes personnes pourraient faire l'affaire.
La seule façon de penser à le faire est de faire quelque chose comme alert ('vous avez un nouveau message') lorsque le message est reçu. Cela clignotera la barre des tâches si la fenêtre est minimisée, mais elle ouvrira également une boîte de dialogue, que vous ne voudrez 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 pouvez essayer window.focus() - mais cela peut être ennuyeux si l'écran bascule
Vous pouvez modifier le titre de la page web à chaque nouveau message pour alerter l'utilisateur. Je l'ai fait pour un client de chat de navigateur et la plupart des utilisateurs pensaient 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é uniquement sur le web. Nous avons fini par utiliser window.focus(), qui fonctionne la plupart du temps. Parfois, il va effectivement provoquer la fenêtre de voler le focus de l'application de premier plan, ce qui peut être vraiment ennuyeux.
Ces utilisateurs ne veulent être distraits quand un nouveau message arrive.
On dirait que vous écrivez une application pour un projet d'entreprise interne.
Vous voudrez peut-être étudier l'écriture d'une petite application windows dans.net qui ajoute une icône de notification et peut ensuite faire des popups Fantaisie ou des popups de ballon ou autre, quand ils reçoivent de nouveaux messages.
Ce n'est pas trop difficile et je suis sûr que si vous demandez "comment puis-je afficher une icône de la barre" et "comment puis-je faire des notifications pop-up" vous obtiendrez d'excellentes réponses: -)
Pour mémoire, je suis sûr que (autre que l'utilisation d'une boîte de dialogue Alerte/invite) vous ne pouvez pas flasher la barre des tâches dans JS, car cela est fortement spécifique à windows, et JS ne fonctionne vraiment pas comme ça. Vous pouvez utiliser certains contrôles activex Windows spécifiques à IE, mais vous infligez IE à vos utilisateurs pauvres. Ne pas le faire :-(