Pregunta

¿Cómo hago para que el navegador de un usuario parpadee, parpadee o resalte en la barra de tareas usando JavaScript?Por ejemplo, si hago una solicitud AJAX cada 10 segundos para ver si el usuario tiene algún mensaje nuevo en el servidor, quiero que el usuario lo sepa de inmediato, incluso si está usando otra aplicación en ese momento.

Editar:Estos usuarios quieren distraerse cuando llega un mensaje nuevo.

¿Fue útil?

Solución

Esto no hará que el botón de la barra de tareas parpadee cambiando de color, pero el título parpadeará hasta que mueva el mouse.Esto debería funcionar en varias plataformas, incluso si lo tienen en una pestaña diferente.

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

Actualizar:Es posible que desee considerar el uso Notificaciones HTML5.

Otros consejos

he hecho un complemento jQuery con el fin de hacer parpadear los mensajes de notificación en la barra de título del navegador.Puede especificar diferentes opciones como el intervalo de parpadeo, la duración, si el parpadeo debe detenerse cuando la ventana/pestaña se enfoca, etc.El complemento funciona en Firefox, Chrome, Safari, IE6, IE7 e IE8.

Aquí hay un ejemplo de cómo usarlo:

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

Si no estás usando jQuery, es posible que quieras consultar el código fuente (Hay algunos errores peculiares y casos extremos que debes solucionar al hacer parpadear el título si deseas ser totalmente compatible con los principales navegadores).

Supuestamente puedes hacer esto en Windows con la API de JavaScript growl para Windows:

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

Sin embargo, tus usuarios tendrán que instalar growl.

Con el tiempo, esto formará parte de Google Gears, en forma de NotificationAPI:

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

Por lo tanto, recomendaría usar el enfoque de gruñido por ahora, recurrir a las actualizaciones de títulos de ventanas si es posible y ya diseñar intentos de usar la API de notificación de Gears, para cuando finalmente esté disponible.

Mi respuesta de "interfaz de usuario" es:Está seguro tus usuarios quieren que sus navegadores parpadeen, o no Crees eso es lo que quieren?Si fuera yo quien usara su software, sé que me molestaría si estas alertas sucedieran con mucha frecuencia y se interpusieran en mi camino.

Si está seguro de querer hacerlo de esta manera, utilice un cuadro de alerta de JavaScript.Eso es lo que hace Google Calendar con los recordatorios de eventos, y probablemente lo hayan pensado un poco.

Una página web realmente no es el mejor medio para recibir alertas de necesidad de información.Si estás diseñando algo en la línea de "Zomg, ¡los servidores están abajo!" Alertas, correos electrónicos automatizados o mensajes de SMS a las personas adecuadas podrían hacer el truco.

La única forma en que se me ocurre hacer esto es haciendo algo como alerta ("tienes un mensaje nuevo") cuando se recibe el mensaje.Esto hará que la barra de tareas parpadee si la ventana está minimizada, pero también abrirá un cuadro de diálogo, que quizás no desee.

¿Por qué no adoptar el enfoque que utiliza GMail y mostrar la cantidad de mensajes en el título de la página?

A veces los usuarios no quieren distraerse cuando llega un mensaje nuevo.

                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 

Quizás quieras probar window.focus(), pero puede resultar molesto si la pantalla cambia

podrías cambiar el título de la página web con cada nuevo mensaje para alertar al usuario.Hice esto para un cliente de chat de navegador y la mayoría de los usuarios pensaron que funcionaba bastante bien.

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

AFAIK, no existe una buena manera de hacer esto con coherencia.Estaba escribiendo un cliente de mensajería instantánea basado en web únicamente para IE.Terminamos usando window.focus(), que funciona la mayor parte del tiempo.A veces, en realidad, hará que la ventana robe el foco de la aplicación de primer plano, lo que puede ser realmente molesto.

Estos usuarios quieren distraerse cuando llega un mensaje nuevo.

Parece que estás escribiendo una aplicación para un proyecto interno de la empresa.

Es posible que desee investigar la posibilidad de escribir una pequeña aplicación de Windows en .net que agregue un ícono de notificación y luego pueda generar ventanas emergentes elegantes o ventanas emergentes con globos o lo que sea, cuando reciban mensajes nuevos.

Esto no es demasiado difícil y estoy seguro de que si preguntas "cómo muestro un icono de bandeja" y "cómo hago notificaciones emergentes", obtendrás excelentes respuestas :-)

Para que conste, estoy bastante seguro de que (aparte de usar un cuadro de diálogo de alerta/mensaje) no puede mostrar la barra de tareas en JS, ya que esto es muy específico de Windows, y JS realmente no funciona así.Es posible que pueda utilizar algunos controles Activex de Windows específicos de IE, pero luego inflige IE a sus usuarios pobres.No hagas eso :-(

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top