ทำให้หน้าต่างเบราว์เซอร์กะพริบในแถบงาน

ฉันจะทำให้เบราว์เซอร์ของผู้ใช้กะพริบ / แฟลช / ไฮไลต์ในแถบงานโดยใช้ JavaScript ได้อย่างไร ตัวอย่างเช่นหากฉันส่งคำขอ AJAX ทุกๆ 10 วินาทีเพื่อดูว่าผู้ใช้มีข้อความใหม่บนเซิร์ฟเวอร์หรือไม่ฉันต้องการให้ผู้ใช้ทราบทันทีแม้ว่าเขาจะใช้แอปพลิเคชันอื่นในเวลานั้นก็ตาม

แก้ไข: ผู้ใช้เหล่านี้ไม่ต้องการเสียสมาธิเมื่อมีข้อความใหม่มาถึง

สิ่งนี้จะไม่ทำให้ปุ่มแถบงานกะพริบในการเปลี่ยนสี แต่หัวเรื่องจะกะพริบและปิดจนกว่าพวกเขาจะเลื่อนเมาส์ สิ่งนี้ควรทำงานข้ามแพลตฟอร์มและแม้ว่าจะมีเพียงแท็บอื่นก็ตาม

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

ปรับปรุง : คุณอาจต้องการที่จะดูที่การใช้การแจ้งเตือน HTML5

ฉันได้สร้างปลั๊กอิน jQueryเพื่อจุดประสงค์ในการกะพริบข้อความแจ้งเตือนในแถบหัวเรื่องของเบราว์เซอร์ คุณสามารถระบุตัวเลือกต่างๆเช่นช่วงเวลากะพริบระยะเวลาหากการกะพริบควรหยุดลงเมื่อหน้าต่าง / แท็บถูกโฟกัสเป็นต้นปลั๊กอินทำงานใน Firefox, Chrome, Safari, IE6, IE7 และ IE8

นี่คือตัวอย่างวิธีการใช้งาน:

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

หากคุณไม่ได้ใช้ jQuery คุณอาจยังต้องการดูซอร์สโค้ด (มีข้อบกพร่องและกรณีขอบที่แปลกประหลาดบางอย่างที่คุณต้องแก้ไขเมื่อทำหัวเรื่องกะพริบหากคุณต้องการรองรับเบราว์เซอร์หลักทั้งหมดอย่างเต็มที่)

คำตอบ "อินเทอร์เฟซผู้ใช้" ของฉันคือ: คุณแน่ใจหรือไม่ว่าผู้ใช้ของคุณต้องการให้เบราว์เซอร์ของพวกเขากระพริบหรือคุณคิดว่านั่นคือสิ่งที่พวกเขาต้องการ ถ้าฉันเป็นคนหนึ่งที่ใช้ซอฟต์แวร์ของคุณฉันรู้ว่าฉันจะรำคาญถ้าการแจ้งเตือนเหล่านี้เกิดขึ้นบ่อยมากและเข้ามาขวางทางฉัน

หากคุณแน่ใจว่าต้องการทำในลักษณะนี้ให้ใช้กล่องแจ้งเตือนจาวาสคริปต์ นั่นคือสิ่งที่ Google ปฏิทินใช้สำหรับการแจ้งเตือนกิจกรรมและพวกเขาอาจใช้ความคิดบางอย่าง

หน้าเว็บไม่ใช่สื่อที่ดีที่สุดสำหรับการแจ้งเตือนที่จำเป็นต้องทราบ หากคุณกำลังออกแบบบางอย่างตามแนว "ZOMG เซิร์ฟเวอร์จะหยุดทำงาน!" การแจ้งเตือนอีเมลอัตโนมัติหรือข้อความ SMS ถึงคนที่เหมาะสมอาจทำกลอุบายได้

สมมติว่าคุณสามารถทำได้บน windows ด้วยคำรามสำหรับ windows javascript API:

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

ผู้ใช้ของคุณจะต้องติดตั้งคำราม

ในที่สุดสิ่งนี้จะเป็นส่วนหนึ่งของ Google Gear ในรูปแบบของ NotificationAPI:

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

ดังนั้นฉันขอแนะนำให้ใช้วิธีการคำรามในตอนนี้โดยถอยกลับไปที่การอัปเดตชื่อหน้าต่างหากเป็นไปได้และได้ทำการวิศวกรรมแล้วในความพยายามที่จะใช้ Gears Notification API เมื่อในที่สุดก็พร้อมใช้งาน

                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 

วิธีเดียวที่ฉันคิดได้คือทำบางอย่างเช่นแจ้งเตือน ('คุณมีข้อความใหม่') เมื่อได้รับข้อความ การดำเนินการนี้จะกะพริบแถบงานหากหน้าต่างย่อเล็กสุด แต่จะเปิดกล่องโต้ตอบด้วยซึ่งคุณอาจไม่ต้องการ

ทำไมไม่ใช้วิธีที่ GMail ใช้และแสดงจำนวนข้อความในชื่อเพจ

บางครั้งผู้ใช้ไม่อยากเสียสมาธิเมื่อมีข้อความใหม่เข้ามา

คุณอาจต้องการลอง window.focus () - แต่อาจจะน่ารำคาญหากหน้าจอสลับไปมา

คุณสามารถเปลี่ยนชื่อของหน้าเว็บด้วยข้อความใหม่แต่ละข้อความเพื่อแจ้งเตือนผู้ใช้ ฉันทำสิ่งนี้สำหรับไคลเอนต์แชทบนเบราว์เซอร์และผู้ใช้ส่วนใหญ่คิดว่ามันทำงานได้ดีพอ

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

AFAIK ไม่มีวิธีที่ดีในการทำเช่นนี้อย่างสม่ำเสมอ ฉันกำลังเขียนไคลเอนต์ IM บนเว็บของ IE เท่านั้น เราลงเอยด้วยการใช้ window.focus () ซึ่งใช้งานได้เกือบตลอดเวลา บางครั้งมันอาจทำให้หน้าต่างขโมยโฟกัสจากแอพเบื้องหน้าซึ่งอาจน่ารำคาญจริงๆ

ผู้ใช้เหล่านี้ไม่ต้องการเสียสมาธิเมื่อมีข้อความใหม่มาถึง

ดูเหมือนคุณกำลังเขียนแอปสำหรับโครงการภายใน บริษัท

คุณอาจต้องการตรวจสอบการเขียนแอป windows ขนาดเล็กใน. net ซึ่งเพิ่มไอคอนการแจ้งเตือนจากนั้นสามารถทำป๊อปอัปแฟนซีหรือป๊อปอัปบอลลูนหรืออะไรก็ได้เมื่อได้รับข้อความใหม่

นี่ไม่ใช่เรื่องยากเกินไปและฉันแน่ใจว่าถ้าคุณถาม SO ว่า 'ฉันจะแสดงไอคอนถาดได้อย่างไร' และ 'ฉันจะแสดงการแจ้งเตือนแบบป๊อปอัปได้อย่างไร' คุณจะได้รับคำตอบที่ดี :-)

สำหรับบันทึกฉันค่อนข้างแน่ใจว่า (นอกเหนือจากการใช้กล่องโต้ตอบการแจ้งเตือน / พรอมต์) คุณไม่สามารถแฟลชแถบงานใน JS ได้เนื่องจากเป็นหน้าต่างที่เฉพาะเจาะจงมากและ JS ไม่ทำงานเช่นนั้นจริงๆ คุณอาจสามารถใช้ตัวควบคุม windows activex เฉพาะของ IE ได้ แต่จากนั้นคุณก็สร้าง IE ให้กับผู้ใช้ที่ไม่ดีของคุณ อย่าทำอย่างนั้น :-(

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