Lassen Sie das Browserfenster in der Taskleiste blinken

Wie kann ich den Browser eines Benutzers mithilfe von JavaScript in der Taskleiste blinken / blinken / hervorheben lassen? Wenn ich beispielsweise alle 10 Sekunden eine AJAX-Anfrage stelle, um festzustellen, ob der Benutzer neue Nachrichten auf dem Server hat, möchte ich, dass der Benutzer dies sofort weiß, auch wenn er gerade eine andere Anwendung verwendet.

Bearbeiten: Diese Benutzer möchten abgelenkt werden, wenn eine neue Nachricht eintrifft.

Dadurch blinkt die Taskleistenschaltfläche nicht in wechselnden Farben, aber der Titel blinkt ein und aus, bis die Maus bewegt wird. Dies sollte plattformübergreifend funktionieren, und selbst wenn sie es nur auf einer anderen Registerkarte haben.

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

Update : Möglicherweise möchten Sie HTML5-Benachrichtigungen verwenden .

Ich habe ein jQuery-Plugin erstellt, um Benachrichtigungsnachrichten in der Titelleiste des Browsers zu blinken. Sie können verschiedene Optionen wie Blinkintervall, Dauer, ob das Blinken aufhören soll, wenn das Fenster / die Registerkarte fokussiert wird usw. angeben. Das Plugin funktioniert in Firefox, Chrome, Safari, IE6, IE7 und IE8.

Hier ist ein Beispiel für die Verwendung:

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

Wenn Sie jQuery nicht verwenden, sollten Sie sich dennoch den Quellcode ansehen (es gibt einige skurrile Fehler und Randfälle, die Sie beim Blinken von Titeln umgehen müssen, wenn Sie alle gängigen Browser vollständig unterstützen möchten).

Meine Antwort auf die "Benutzeroberfläche" lautet: Sind Sie sicher, dass Ihre Benutzer möchten, dass ihre Browser blinken, oder glauben Sie, dass sie dies möchten? Wenn ich Ihre Software verwenden würde, wäre ich verärgert, wenn diese Warnungen sehr oft auftreten und mir im Weg stehen würden.

Wenn Sie sicher sind, dass Sie dies auf diese Weise tun möchten, verwenden Sie ein Javascript-Warnfeld. Dies ist, was Google Kalender für Ereigniserinnerungen tut, und sie haben wahrscheinlich darüber nachgedacht.

Eine Webseite ist wirklich nicht das beste Medium für wichtige Benachrichtigungen. Wenn Sie etwas nach dem Vorbild von "ZOMG, die Server sind ausgefallen!" Entwerfen. Warnungen, automatisierte E-Mails oder SMS-Nachrichten an die richtigen Personen könnten den Trick tun.

Angeblich können Sie dies unter Windows mit der Javascript-API Growl for Windows tun:

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

Ihre Benutzer müssen jedoch Growl installieren.

Letztendlich wird dies Teil von Google Gears in Form der NotificationAPI sein:

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

Daher würde ich empfehlen, vorerst den Growl-Ansatz zu verwenden, wenn möglich auf Aktualisierungen der Fenstertitel zurückzugreifen und bereits Versuche zu unternehmen, die Gears Notification-API zu verwenden, wenn sie schließlich verfügbar wird.

                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 

Die einzige Möglichkeit, dies zu tun, besteht darin, beim Empfang der Nachricht eine Warnung auszuführen ("Sie haben eine neue Nachricht"). Dadurch wird die Taskleiste geflasht, wenn das Fenster minimiert ist. Es wird jedoch auch ein Dialogfeld geöffnet, das Sie möglicherweise nicht möchten.

Warum nicht den von GMail verwendeten Ansatz wählen und die Anzahl der Nachrichten im Seitentitel anzeigen?

Manchmal möchten Benutzer nicht abgelenkt werden, wenn eine neue Nachricht eintrifft.

Vielleicht möchten Sie window.focus () ausprobieren - aber es kann ärgerlich sein, wenn der Bildschirm umschaltet

Sie können den Titel der Webseite mit jeder neuen Nachricht ändern, um den Benutzer zu benachrichtigen. Ich habe dies für einen Browser-Chat-Client getan und die meisten Benutzer fanden, dass es gut genug funktioniert.

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

AFAIK, es gibt keinen guten Weg, dies konsequent zu tun. Ich habe einen webbasierten IM-Client nur für IE geschrieben. Am Ende haben wir window.focus () verwendet, was die meiste Zeit funktioniert. Manchmal führt dies tatsächlich dazu, dass das Fenster den Fokus aus der Vordergrund-App stiehlt, was sehr ärgerlich sein kann.

Diese Benutzer möchten abgelenkt werden, wenn eine neue Nachricht eintrifft.

Es hört sich so an, als würden Sie eine App für ein internes Unternehmensprojekt schreiben.

Vielleicht möchten Sie das Schreiben einer kleinen Windows-App in .net untersuchen, die ein Benachrichtigungssymbol hinzufügt und dann ausgefallene Popups oder Ballon-Popups oder was auch immer erstellen kann, wenn sie neue Nachrichten erhalten.

Das ist nicht allzu schwer und ich bin mir sicher, wenn Sie SO fragen: "Wie zeige ich ein Tray-Symbol?" Und "Wie mache ich Popup-Benachrichtigungen?", Erhalten Sie einige großartige Antworten :-)

Ich bin mir ziemlich sicher, dass Sie (abgesehen von der Verwendung eines Warn- / Eingabeaufforderungsdialogfelds) die Taskleiste in JS nicht flashen können, da dies stark Windows-spezifisch ist und JS wirklich nicht so funktioniert. Möglicherweise können Sie einige IE-spezifische Windows ActiveX-Steuerelemente verwenden, aber dann fügen Sie Ihren armen Benutzern IE hinzu. Tu das nicht :-(

function blinkTab() {
        const browserTitle = document.title;
        let timeoutId;
        let message = 'My New Title';

        const stopBlinking = () => {
            document.title = browserTitle;
            clearInterval(timeoutId);
        };

        const startBlinking = () => {
            document.title = document.title  === message ? browserTitle : message;
        };

        function registerEvents() {
            window.addEventListener("focus", function(event) { 
                stopBlinking();
            });

            window.addEventListener("blur", function(event) {
                const timeoutId = setInterval(startBlinking, 500);
            });
        };

        registerEvents();
    };


    blinkTab();