Làm cho cửa sổ trình duyệt nhấp nháy trong Thanh tác vụ

Làm cách nào để làm cho trình duyệt của người dùng nhấp nháy / nhấp nháy / đánh dấu trong thanh tác vụ bằng JavaScript? Ví dụ: nếu tôi thực hiện yêu cầu AJAX 10 giây một lần để xem liệu người dùng có bất kỳ thư mới nào trên máy chủ hay không, tôi muốn người dùng biết nó ngay lập tức, ngay cả khi anh ta đang sử dụng ứng dụng khác vào thời điểm đó.

Chỉnh sửa: Những người dùng này muốn bị phân tâm khi có tin nhắn mới.

điều này sẽ không làm cho nút trên thanh tác vụ nhấp nháy thay đổi màu sắc, nhưng tiêu đề sẽ nhấp nháy và tắt cho đến khi chúng di chuyển chuột. Điều này sẽ hoạt động trên nhiều nền tảng và ngay cả khi họ chỉ có nó trong một tab khác.

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

Cập nhật : Bạn có thể muốn xem bằng cách sử dụng thông báo HTML5 .

Tôi đã tạo một plugin jQuery với mục đích nhấp nháy các thông báo trên thanh tiêu đề của trình duyệt. Bạn có thể chỉ định các tùy chọn khác nhau như khoảng thời gian nhấp nháy, thời lượng, nếu nhấp nháy sẽ dừng khi cửa sổ / tab được lấy tiêu điểm, v.v. Plugin hoạt động trên Firefox, Chrome, Safari, IE6, IE7 và IE8.

Đây là một ví dụ về cách sử dụng nó:

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

Nếu bạn không sử dụng jQuery, bạn có thể vẫn muốn xem mã nguồn (có một số lỗi kỳ quặc và các trường hợp phức tạp mà bạn cần phải giải quyết khi nhấp nháy tiêu đề nếu bạn muốn hỗ trợ đầy đủ tất cả các trình duyệt chính).

Câu trả lời "giao diện người dùng" của tôi là: Bạn có chắc người dùng của mình muốn trình duyệt của họ nhấp nháy hay bạn nghĩ đó là những gì họ muốn? Nếu tôi là người sử dụng phần mềm của bạn, tôi biết tôi sẽ rất khó chịu nếu những cảnh báo này xảy ra rất thường xuyên và cản đường tôi.

Nếu bạn chắc chắn muốn làm theo cách này, hãy sử dụng hộp cảnh báo javascript. Đó là những gì Lịch Google làm cho lời nhắc sự kiện và họ có thể đã suy nghĩ về nó.

Một trang web thực sự không phải là phương tiện tốt nhất cho các cảnh báo cần biết. Nếu bạn đang thiết kế một thứ gì đó theo dòng "ZOMG, thì máy chủ không hoạt động!" cảnh báo, e-mail tự động hoặc tin nhắn SMS đến đúng người có thể thực hiện thủ thuật.

Được cho là bạn có thể thực hiện việc này trên windows với tiếng gầm gừ cho API javascript của windows:

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

Người dùng của bạn sẽ phải cài đặt tiếng gầm gừ.

Cuối cùng thì đây sẽ là một phần của google gears, dưới dạng Thông báoAPI:

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

Vì vậy, tôi khuyên bạn nên sử dụng phương pháp gầm gừ ngay bây giờ, quay lại cập nhật tiêu đề cửa sổ nếu có thể và đã thiết kế để cố gắng sử dụng API thông báo của Gears, cho khi nó cuối cùng khả dụng.

                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 

Cách duy nhất tôi có thể nghĩ để làm điều này là làm một cái gì đó như cảnh báo ('bạn có tin nhắn mới') khi tin nhắn được nhận. Thao tác này sẽ nhấp nháy thanh tác vụ nếu cửa sổ được thu nhỏ, nhưng nó cũng sẽ mở ra một hộp thoại mà bạn có thể không muốn.

Tại sao không sử dụng cách tiếp cận mà GMail sử dụng và hiển thị số lượng thư trong tiêu đề trang?

Đôi khi người dùng không muốn bị phân tâm khi có tin nhắn mới.

Bạn có thể muốn thử window.focus () - nhưng có thể gây khó chịu nếu màn hình chuyển xung quanh

bạn có thể thay đổi tiêu đề của trang web với mỗi thông báo mới để cảnh báo người dùng. Tôi đã làm điều này cho một ứng dụng trò chuyện trình duyệt và hầu hết người dùng nghĩ rằng nó hoạt động đủ tốt.

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

AFAIK, không có cách nào tốt để làm điều này với sự nhất quán. Tôi đang viết một ứng dụng khách IM dựa trên web chỉ dành cho IE. Chúng tôi đã kết thúc bằng cách sử dụng window.focus (), hoạt động hầu hết thời gian. Đôi khi nó thực sự sẽ khiến cửa sổ lấy cắp tiêu điểm từ ứng dụng nền trước, điều này có thể thực sự gây khó chịu.

Những người dùng này muốn bị phân tâm khi có tin nhắn mới.

Có vẻ như bạn đang viết một ứng dụng cho một dự án nội bộ của công ty.

Bạn có thể muốn điều tra việc viết một ứng dụng cửa sổ nhỏ trong .net có thêm biểu tượng thông báo và sau đó có thể tạo các cửa sổ bật lên ưa thích hoặc cửa sổ bật lên bong bóng hoặc bất cứ thứ gì, khi họ nhận được tin nhắn mới.

Điều này không quá khó và tôi chắc chắn nếu bạn hỏi VẬY 'làm cách nào để hiển thị biểu tượng khay' và 'làm cách nào để bật thông báo lên' bạn sẽ nhận được một số câu trả lời tuyệt vời :-)

Đối với hồ sơ, tôi khá chắc chắn rằng (ngoài việc sử dụng hộp thoại cảnh báo / nhắc nhở) bạn không thể flash thanh tác vụ trong JS, vì đây là phần lớn dành riêng cho cửa sổ và JS thực sự không hoạt động như vậy. Bạn có thể sử dụng một số điều khiển activex cửa sổ cụ thể của IE, nhưng sau đó bạn đã gây hại cho IE cho những người dùng kém của mình. Đừng làm vậy :-(

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