javascript - 使浏览器窗口在任务栏中闪烁

Question

如何使用 JavaScript 在任务栏中使用户的浏览器闪烁/闪烁/突出显示？例如，如果我每 10 秒发出一次 AJAX 请求以查看用户在服务器上是否有任何新消息，我希望用户立即知道它，即使他当时正在使用另一个应用程序。

编辑：当新消息到达时，这些用户确实希望分心。

Answer 1

这不会使任务栏按钮闪烁改变颜色，但标题会闪烁，直到他们移动鼠标。这应该可以跨平台工作，即使他们只是将它放在不同的选项卡中。

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 通知。

Answer 2

我制作了一个jQuery 插件，用于在浏览器标题栏中闪烁通知消息。您可以指定不同的选项，例如闪烁间隔、持续时间、是否在窗口/选项卡获得焦点时停止闪烁等。该插件适用于 Firefox、Chrome、Safari、IE6、IE7 和 IE8。

下面是一个关于如何使用它的例子：

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

如果您不使用 jQuery，您可能仍想查看源代码（如果您想完全支持所有主流浏览器，则在进行标题闪烁时需要解决一些奇怪的错误和边缘情况）。

Answer 3

假设您可以在 windows 上使用rowl for windows javascript API 执行此操作：

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

不过，您的用户将不得不安装咆哮。

最终这将成为谷歌齿轮的一部分，以 NotificationAPI 的形式：

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

所以我现在建议使用咆哮的方法，如果可能的话回退到窗口标题更新，并且已经在尝试使用 Gears 通知 API，以便它最终可用。

Answer 4

                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 

Answer 5

我的“用户界面”回应是：您确定您的用户希望他们的浏览器闪烁，还是您认为这就是他们想要的？如果我是使用您的软件的人，我知道如果这些警报经常发生并妨碍我，我会很生气。

如果您确定要这样做，请使用 javascript 警报框。这就是谷歌日历为事件提醒所做的事情，他们可能会考虑一下。

网页确实不是需要知道警报的最佳媒介。如果您正在设计类似“ZOMG，服务器已关闭！”的内容。向正确的人发送警报、自动电子邮件或 SMS 消息可能会起到作用。

Answer 6

我能想到的唯一方法是在收到消息时执行类似 alert('you have a new message') 之类的操作。如果窗口最小化，这将闪烁任务栏，但它也会打开一个您可能不想要的对话框。

Answer 7

为什么不采用 GMail 使用的方法并在页面标题中显示邮件数量？

有时用户不想在收到新消息时分心。

Answer 8

您可以使用每条新消息更改网页的标题以提醒用户。我为浏览器聊天客户端做了这个，大多数用户认为它运行得很好。

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

Answer 9

您可能想尝试 window.focus() - 但如果屏幕切换可能会很烦人

Answer 10

AFAIK，没有好的方法可以保持一致性。我正在编写一个仅基于 IE 的基于 Web 的 IM 客户端。我们最终使用了 window.focus()，它在大多数情况下都有效。有时它实际上会导致窗口从前台应用程序中窃取焦点，这真的很烦人。

Answer 11

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

Answer 12

当新消息到达时，这些用户确实希望分心。

听起来您正在为公司内部项目编写应用程序。

您可能想研究在 .net 中编写一个小型 Windows 应用程序，该应用程序添加一个通知图标，然后可以在收到新消息时执行精美的弹出窗口或气球弹出窗口等。

这并不太难，我相信如果你问“我如何显示托盘图标”和“我如何弹出通知”，你会得到一些很好的答案:-)

作为记录，我很确定（除了使用警报/提示对话框）你不能在 JS 中闪烁任务栏，因为这在很大程度上是特定于 Windows 的，而 JS 真的不能那样工作。您也许可以使用一些特定于 IE 的 windows activex 控件，但随后您将 IE 强加给可怜的用户。不要那样做:-(

Answer 13

“使浏览器窗口在任务栏中闪烁”

via Javascript 

不可能！！