首页 / 知识

关于javascript:使浏览器窗口在任务栏中闪烁

2023-04-13 18:49:00

关于javascript:使浏览器窗口在任务栏中闪烁

Make browser window blink in task Bar

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

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


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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中使用。

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

1
2
3
4
5
$.titleAlert("New mail!", {
    requireBlur:true,
    stopOnFocus:true,
    interval:600
});

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


大概您可以在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。


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

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

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
                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使用的方法,并在页面标题中显示邮件数?

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


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


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


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


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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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();

These users do want to be distracted when a new message arrives.

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

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

这并不太难,而且我敢肯定,如果您问"如何显示托盘图标"和"如何弹出通知",您会得到一些很好的答案:-)

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


闪烁浏览器用户请求

最新内容

相关内容

热门文章

推荐文章

标签云

猜你喜欢