Fai lampeggiare la finestra del browser nella barra delle attività

StackOverflow https://stackoverflow.com/questions/37122

  •  09-06-2019
  •  | 
  •  

Domanda

Come faccio a far lampeggiare/lampeggiare/evidenziare il browser di un utente nella barra delle applicazioni utilizzando JavaScript?Ad esempio, se eseguo una richiesta AJAX ogni 10 secondi per vedere se l'utente ha nuovi messaggi sul server, voglio che l'utente lo sappia subito, anche se in quel momento sta utilizzando un'altra applicazione.

Modificare:Questi utenti vogliono essere distratti quando arriva un nuovo messaggio.

È stato utile?

Soluzione

questo non farà lampeggiare il pulsante della barra delle applicazioni cambiando colore, ma il titolo lampeggerà fino a quando non si sposta il mouse.Dovrebbe funzionare su più piattaforme e anche se lo hanno solo in una scheda diversa.

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

Aggiornamento:Potresti voler esaminare l'utilizzo Notifiche HTML5.

Altri suggerimenti

Ho fatto un plugin jQuery allo scopo di far lampeggiare i messaggi di notifica nella barra del titolo del browser.Puoi specificare diverse opzioni come l'intervallo di lampeggiamento, la durata, se il lampeggiamento deve interrompersi quando la finestra/scheda viene messa a fuoco, ecc.Il plugin funziona in Firefox, Chrome, Safari, IE6, IE7 e IE8.

Ecco un esempio su come usarlo:

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

Se non stai utilizzando jQuery, potresti comunque voler guardare il file codice sorgente (ci sono alcuni bug bizzarri e casi limite che devi aggirare quando fai lampeggiare il titolo se vuoi supportare completamente tutti i principali browser).

Presumibilmente puoi farlo su Windows con il ringhio per l'API javascript di Windows:

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

I tuoi utenti dovranno però installare growl.

Alla fine questo farà parte di Google Gears, sotto forma di NotificationAPI:

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

Quindi consiglierei di utilizzare l'approccio ringhio per ora, tornando agli aggiornamenti del titolo della finestra, se possibile, e già tentando di utilizzare l'API di notifica di Gears, per quando sarà finalmente disponibile.

La mia risposta "interfaccia utente" è:Sei sicuro i tuoi utenti vogliono che i loro browser lampeggino, o lo fanno si pensa è quello che vogliono?Se fossi io a utilizzare il tuo software, so che mi arrabbierei se questi avvisi si verificassero molto spesso e mi ostacolassero.

Se sei sicuro di volerlo fare in questo modo, utilizza una casella di avviso JavaScript.Questo è ciò che fa Google Calendar per i promemoria degli eventi e probabilmente ci hanno pensato un po'.

Una pagina web non è davvero il mezzo migliore per ricevere avvisi di necessità.Se stai progettando qualcosa sulla falsariga di "Zomg, i server sono giù!" Avvisi, e-mail automatizzate o messaggi SMS alle persone giuste potrebbero fare il trucco.

L'unico modo in cui riesco a pensare di farlo è fare qualcosa come alert('hai un nuovo messaggio') quando il messaggio viene ricevuto.Ciò farà lampeggiare la barra delle applicazioni se la finestra è ridotta a icona, ma aprirà anche una finestra di dialogo, cosa che potresti non desiderare.

Perché non adottare l'approccio utilizzato da GMail e mostrare il numero di messaggi nel titolo della pagina?

A volte gli utenti non vogliono essere distratti quando arriva un nuovo messaggio.

                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

Potresti provare window.focus() - ma potrebbe essere fastidioso se lo schermo cambia

potresti cambiare il titolo della pagina web con ogni nuovo messaggio per avvisare l'utente.L'ho fatto per un client di chat del browser e la maggior parte degli utenti ha pensato che funzionasse abbastanza bene. 

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

Per quanto ne so, non esiste un buon modo per farlo con coerenza.Stavo scrivendo un client IM basato solo su IE.Alla fine abbiamo utilizzato window.focus(), che funziona la maggior parte delle volte.A volte la finestra potrebbe effettivamente rubare lo stato attivo all'app in primo piano, il che può essere davvero fastidioso.

Questi utenti vogliono essere distratti quando arriva un nuovo messaggio.

Sembra che tu stia scrivendo un'app per un progetto aziendale interno.

Potresti voler studiare la scrittura di una piccola app Windows in .net che aggiunga un'icona di notifica e possa quindi eseguire popup fantasiosi o popup di palloncini o altro, quando ricevono nuovi messaggi.

Non è eccessivamente difficile e sono sicuro che se chiedi "come faccio a mostrare un'icona nella barra delle applicazioni" e "come faccio a visualizzare le notifiche popup" otterrai delle ottime risposte :-)

Per la cronaca, sono abbastanza sicuro che (a parte l'utilizzo di una finestra di dialogo di avviso/prompt) non è possibile eseguire il flashing della barra delle applicazioni in JS, poiché è fortemente specifico di Windows e JS in realtà non funziona in questo modo.Potresti essere in grado di utilizzare alcuni controlli ActiveX di Windows specifici di IE, ma poi infliggi IE ai tuoi poveri utenti.Non farlo :-(

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top