Görev Çubuğunda tarayıcı penceresinin yanıp sönmesini sağlayın

JavaScript kullanarak bir kullanıcının tarayıcısının görev çubuğunda yanıp sönmesini / yanıp sönmesini / vurgulanmasını nasıl sağlayabilirim? Örneğin, kullanıcının sunucuda yeni mesaj olup olmadığını görmek için her 10 saniyede bir AJAX isteğinde bulunursam, o sırada başka bir uygulama kullanıyor olsa bile kullanıcının bunu hemen bilmesini isterim.

Düzenle: Bu kullanıcılar, yeni bir mesaj geldiğinde dikkatlerinin dağılmasını ister.

bu, görev çubuğu düğmesinin değişen renklerde yanıp sönmesine neden olmaz, ancak başlık, fareyi hareket ettirene kadar yanıp söner. Bu, platformlar arası çalışmalı ve farklı bir sekmede olsa bile.

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

Güncelleme : HTML5 bildirimlerini kullanmak isteyebilirsiniz .

Tarayıcı başlık çubuğunda bildirim mesajlarının yanıp sönmesi amacıyla bir jQuery eklentisi yaptım . Pencere / sekme odaklandığında yanıp sönmenin durması gerekiyorsa, yanıp sönme aralığı, süre gibi farklı seçenekler belirtebilirsiniz. Eklenti Firefox, Chrome, Safari, IE6, IE7 ve IE8'de çalışır.

İşte nasıl kullanılacağına dair bir örnek:

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

JQuery kullanmıyorsanız, yine de kaynak koduna bakmak isteyebilirsiniz (tüm büyük tarayıcıları tam olarak desteklemek istiyorsanız, başlık yanıp sönerken etrafta çalışmanız gereken birkaç ilginç hata ve uç durum vardır).

"Kullanıcı arayüzü" yanıtım şu: Kullanıcılarınızın tarayıcılarının yanıp sönmesini istediğinden emin misiniz , yoksa istediklerinin bu olduğunu mu düşünüyorsunuz ? Yazılımınızı kullanan kişi ben olsaydım, bu uyarılar çok sık meydana gelirse ve yoluma çıkarsa sinirleneceğimi biliyorum.

Bu şekilde yapmak istediğinizden eminseniz, bir javascript uyarı kutusu kullanın. Google Takvim'in etkinlik hatırlatıcıları için yaptığı budur ve muhtemelen bunun üzerine biraz düşündüler.

Bir web sayfası, bilinmesi gereken uyarılar için gerçekten en iyi ortam değildir. "ZOMG, sunucular çöktü!" Doğru kişilere gönderilen uyarılar, otomatik e-postalar veya SMS mesajları işe yarayabilir.

Sözde bunu windows için homurtu javascript API ile pencerelerde yapabilirsiniz:

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

Kullanıcılarınızın homurtu yüklemesi gerekecek.

Sonunda bu, NotificationAPI biçiminde google gears'ın bir parçası olacak:

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

Bu nedenle şimdilik homurtu yaklaşımını kullanmanızı, mümkünse pencere başlık güncellemelerine geri dönmenizi ve en sonunda kullanılabilir olduğunda Gears Bildirim API'sini kullanma girişimlerinde mühendislik yapmayı öneriyorum.

                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 

Bunu yapmayı düşünebilmemin tek yolu, mesaj alındığında uyarı ('yeni bir mesajınız var') gibi bir şey yapmaktır. Pencere simge durumuna küçültülmüşse bu, görev çubuğunu yanıp söner, ancak istemeyebileceğiniz bir iletişim kutusu da açar.

Neden GMail'in kullandığı yaklaşımı benimsemiyorsunuz ve sayfa başlığında mesaj sayısını göstermiyorsunuz?

Bazen kullanıcılar yeni bir mesaj geldiğinde dikkatlerinin dağılmasını istemezler.

Window.focus () 'u denemek isteyebilirsiniz - ancak ekran değişirse can sıkıcı olabilir

kullanıcıyı uyarmak için her yeni mesajla web sayfasının başlığını değiştirebilirsiniz. Bunu bir tarayıcı sohbet istemcisi için yaptım ve çoğu kullanıcı bunun yeterince iyi çalıştığını düşündü.

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

AFAIK, bunu tutarlı bir şekilde yapmanın iyi bir yolu yok. Yalnızca IE web tabanlı bir IM istemcisi yazıyordum. Çoğu zaman işe yarayan window.focus () kullandık. Bazen pencerenin ön plan uygulamasından odağı çalmasına neden olur ki bu gerçekten can sıkıcı olabilir.

Bu kullanıcılar, yeni bir mesaj geldiğinde dikkatlerinin dağılmasını ister.

Şirket içi bir proje için bir uygulama yazıyormuşsunuz gibi görünüyor.

Net'te bir bildirim simgesi ekleyen ve ardından yeni mesajlar aldıklarında süslü pop-up'lar veya balon açılır pencereleri veya her neyse, küçük bir pencere uygulaması yazmayı araştırmak isteyebilirsiniz.

Bu çok zor değil ve eminim SO 'bir tepsi simgesini nasıl gösteririm' ve 'bildirimleri nasıl açarım' diye sorarsanız, bazı harika yanıtlar alırsınız :-)

Kayıt için, oldukça eminim ki (bir uyarı / bilgi istemi iletişim kutusu kullanmak dışında) görev çubuğunu JS'de flaş edemezsiniz, çünkü bu büyük ölçüde pencerelere özgüdür ve JS gerçekten böyle çalışmaz. Bazı IE'ye özgü Windows activex kontrollerini kullanabilirsiniz, ancak daha sonra zayıf kullanıcılarınıza IE uygulayabilirsiniz. Bunu yapma :-(

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