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


104

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

编辑:这些用户确实希望在收到新消息时分心。


7
很奇怪,雅虎邮件做到了,我想知道如何
Ayyash

Answers:


86

这不会使任务栏按钮以改变颜色的方式闪烁,但是标题将一直闪烁,直到他们移动鼠标为止。这应该可以跨平台使用,即使他们只是在其他选项卡中也可以使用。

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


1
我无法按照IE 8中的说明进行操作。它始终使标题一直闪烁。代替使用onmousemove,我不得不使用onfocus和onblur来跟踪窗口何时处于焦点对准状态,并停止onfocus函数中的闪烁。因此,在页面加载时,我注册了onfocus和onblur函数,这些函数可切换布尔“ focused”变量。我还有另一个布尔值可以跟踪何时开始闪烁。在对焦时,如果闪烁开始,则停止闪烁。
彼得M,2010年

4
这似乎在Chrome中不起作用...我认为Chrome无法理解空字符串是任何东西。如果我使用连字符作为“空白”消息,则可以正常工作。
John Bubriski

1
如果警报被多次触发,这似乎会叠加。这会导致间隔越来越快,然后删除时,它只会删除一个间隔。

2
在Windows 7中,更改标题不会在任务栏中闪烁/闪烁
Chand

1
您如何传递参数(消息)呢?
Shinzou

54

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

这是有关如何使用它的示例:

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

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


6

我的“用户界面”响应是:您确定用户希望其浏览器闪烁,还是您认为这就是他们想要的?如果我是使用您软件的人,那么我知道如果这些警报发生得很频繁并且妨碍了我,我会感到烦恼。

如果您确定要这样做,请使用javascript警报框。这就是Google日历用于事件提醒的功能,他们可能对此有所考虑。

网页确实不是需要知道警报的最佳媒介。如果您按照“ ZOMG,则服务器已关闭!”的思路进行设计。警报,自动发送电子邮件或SMS消息给合适的人可能会成功。


11
这不能为问题提供答案。要批评或要求作者澄清,请在其帖子下方发表评论。
secretformula 2014年

2
@secretformula是否真的有必要挖出5年历史的帖子并将其标记为低质量?
Taifun 2014年

2
@Taifun它出现在VLQF队列中,所以是的。Meta也讨论了这一问题
secretformula 2014年

@secretformula,实际上确实为以下问题提供了一个很好的答案:使用JavaScript alert
2015年

是或否,这看起来似乎不是我的答案,但是历史记录显示,两位主持人已经拒绝了NAA标志,因此我在这里遵循共识。
让·弗朗索瓦·法布尔

6

假设您可以在Windows上使用咆哮的Windows javascript API来执行此操作:

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

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

最终,这将以NotificationAPI的形式成为Google齿轮的一部分:

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

因此,我建议暂时使用咆哮方法,如果可能的话,请使用窗口标题更新,并已尝试在最终可用时尝试使用Gears Notification API。


5
                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 

3

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


1
当前浏览器之间的不一致-每个浏览器的行为都不同,并且没有一个使任务栏图标闪烁(经过测试的Win8-IE10,Chrome,Firefox)
danwellman 2012年

3

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

有时,用户不希望在收到新消息时分心。


2

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


1

您可以使用每条新消息更改网页标题,以提醒用户。我是为浏览器聊天客户端执行此操作的,大多数用户认为它运行良好。

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

1

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


0

这些用户确实希望在收到新消息时分心。

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

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

这并不太难,我敢肯定,如果您问“我如何显示任务栏图标”和“我如何弹出通知”,您会得到一些不错的答案:-)

作为记录,我非常确定(除了使用警报/提示对话框外)您不能在JS中刷新任务栏,因为这主要是Windows特有的,而JS确实不能那样工作。您也许可以使用某些特定于IE的Windows ActiveX控件,但随后会对可怜的用户造成IE。不要那样做:-(


0
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();
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.