タスクバーでブラウザウィンドウを点滅させる


104

JavaScriptを使用して、ユーザーのブラウザをタスクバーで点滅/点滅/強調表示するにはどうすればよいですか?たとえば、ユーザーがサーバーに新しいメッセージを持っているかどうかを確認するために10秒ごとにAJAX要求を行う場合、ユーザーがその時点で別のアプリケーションを使用している場合でも、すぐにそれを知らせたいと思います。

編集:これらのユーザーは、新しいメッセージが届いたときに気が散ることを望んでいます。


7
奇妙なことに、yahooメールはそれをやっています、私はどう思いますか
Ayyash

回答:


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関数を登録します。点滅が始まったときに追跡する別のブール値があります。オンフォーカスでは、まばたきが始まったら止めます。
Peter M

4
これはChromeでは機能しないようです...空の文字列が何かであることをChromeが理解していないと思います。「空白」のメッセージとしてハイフンを使用すると、問題なく動作します。
ジョンブブリスキー

1
これは、アラートが複数回トリガーされた場合にスタックするようです。これにより、間隔がどんどん速くなり、削除すると、1つの間隔のみが削除されます。
馬の

2
Windows 7では、タイトルを変更してもタスクバーで点滅/点滅しません
Chand

1
これに引数(メッセージ)をどのように渡しますか?
しんぞう2016年

54

私が作ったjQueryプラグインをブラウザのタイトルバーに通知メッセージを点滅する目的のために。点滅間隔、継続時間、ウィンドウ/タブがフォーカスされたときに点滅を停止するかどうかなど、さまざまなオプションを指定できます。プラグインは、Firefox、Chrome、Safari、IE6、IE7、IE8で動作します。

これを使用する方法の例を次に示します。

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

jQueryを使用していない場合でも、ソースコードを確認することをお勧めします(すべての主要なブラウザーを完全にサポートしたい場合に、タイトルの点滅を行う際に回避する必要があるいくつかの風変わりなバグとエッジケースがあります)。


6

私の "ユーザーインターフェイス"応答は次のとおりです。ユーザーはブラウザーをフラッシュすることを望んでいますか、それともユーザーが望んでいることだと思いますか?私があなたのソフトウェアを使用している場合、これらのアラートが非常に頻繁に発生し、邪魔になると、私は迷惑になることを知っています。

この方法で実行したい場合は、JavaScript警告ボックスを使用してください。それがGoogleカレンダーが予定のリマインダーに対して行うことであり、おそらく彼らはそれにいくつかの考えを入れました。

Webページは、知る必要のあるアラートを送信するための最良の媒体ではありません。「ZOMG、サーバーがダウンしている」に沿って何かを設計している場合!適切な人々へのアラート、自動化された電子メール、またはSMSメッセージがトリックを実行する可能性があります。


11
これは質問に対する答えを提供しません。批評したり、著者に説明を要求するには、投稿の下にコメントを残してください。
secretformula 2014年

2
@secretformula 5年前の投稿を掘り下げて低品質としてフラグを立てる必要があるのですか?
Taifun

2
@Taifun VLQFキューに入ったので、そうです。メタもこれを議論しました
シークレットフォーミュラ2014年

@secretformula、これは実際には質問に対する非常に良い答えを提供します:JavaScriptを使用してくださいalert
Sam

間違っているかどうか、これは私への回答のようには見えませんが、歴史は2人のモデレータがすでにNAAフラグを辞退したことを示しているため、ここではコンセンサスに従っています。
ジャン=フランソワ・ファーブル

6

おそらくあなたはこれをwindows for javascript APIのうなり声でwindowsで行うことができます:

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

ただし、ユーザーはグロールをインストールする必要があります。

最終的には、これは、NotificationAPIの形式で、Google Gearsの一部になります。

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

私がこれを行うと考えることができる唯一の方法は、メッセージが受信されたときにアラート(「あなたは新しいメッセージがあります」)のようなことをすることです。これにより、ウィンドウが最小化されている場合はタスクバーが点滅しますが、ダイアログボックスが表示され、不要な場合があります。


1
現在のブラウザ間で一貫性がありません-それぞれの動作が異なり、タスクバーアイコンを点滅させるものはありません(Win8-IE10、Chrome、Firefoxでテスト済み)
danwellman

3

GMailが使用するアプローチを採用して、ページタイトルにメッセージの数を表示してみませんか?

ユーザーは、新しいメッセージが届いたときに気を散らされたくない場合があります。


2

あなたはwindow.focus()を試してみたいかもしれません-しかし、画面が切り替わると迷惑になるかもしれません


1

新しいメッセージごとにWebページのタイトルを変更して、ユーザーに警告することができます。私はブラウザチャットクライアントのためにこれを行い、ほとんどのユーザーはそれが十分に機能すると考えました。

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

1

私の知る限り、一貫してこれを行う良い方法はありません。IEのみのWebベースのIMクライアントを作成していました。ほとんどの場合機能するwindow.focus()を使用することになりました。場合によっては、実際にウィンドウがフォアグラウンドアプリからフォーカスを奪うことがありますが、これは本当に煩わしい場合があります。


0

これらのユーザーは、新しいメッセージが届いたときに気が散ることを望んでいます。

社内プロジェクト用のアプリを書いているようですね。

通知アイコンを追加し、新しいメッセージを受け取ったときにファンシーポップアップやバルーンポップアップなどを実行できる、小さなウィンドウアプリを.netで作成することを検討することもできます。

これはそれほど難しくはありません。「トレイアイコンを表示するにはどうすればよいですか」と「ポップアップ通知をどのように表示すればよいですか」と尋ねると、すばらしい答えが得られます。

記録のために、これは(アラート/プロンプトダイアログボックスを使用する場合を除いて)JSでタスクバーをフラッシュできないことを確信しています。これはウィンドウ固有であり、JSは実際にはそのように機能しないためです。一部のIE固有のウィンドウの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();
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.