デスクトップ通知を作成したChromeタブにフォーカスを合わせる方法は?


82

Gmailと同じ機能を実装したいと思います。新しいメールが届くか、新しいチャットが来ると、通知ポップアップが表示され、クリックすると、Gmailのタブがフォーカスされます。

私はこのコードを持っています:

var n = window.webkitNotifications.createNotification('ico.gif', 'Title', 'Text');
n.onclick = function(x) { this.cancel(); };
n.show();

通知をクリックすると、通知が消えます。次に、この通知を作成したページを表示してフォーカスするために、onclick関数にコードを追加する必要があります。Gmailはそれを非常にうまくやっているので、私はそれが可能であることを知っています。しかし、Gmailのソースを調べることに成功しませんでした(それらは最小限に抑えられ、難読化されています)。

誰もがこれを行う方法を知っていますか?


this.cancelは非推奨になり、現在のCanaryチャネルで削除されました。
Brandito 2018

回答:


107

window.focus()をGoogleChromeに配置するだけです。クリックするとそのウィンドウにフォーカスします。

var n = window.webkitNotifications.createNotification('ico.gif', 'Title', 'Text');
n.onclick = function(x) { window.focus(); this.close(); };
n.show();

Gmailでインスペクターを開き、上記のコードを追加し、別のタブに移動して実行しました。通知が表示され、クリックするとGmailに戻りました。


3
うわー !その単純な?!:-)素晴らしい答え、ありがとう。かなりグーグルで検索しましたが、見つかりませんでした。今では完全に機能します。ありがとうございます。
Frodik 2011

1
問題ない!ハッキングを楽しんでください:
Mohamed Mansour

現在は機能しませんjsfiddle.net/l2aelba/RhHgR :(、alert()のようにハックして、このウィンドウにフォーカスを戻すことができます
l2aelba 2013

2
誰かがそれが今どのように機能するか知っていますか?コードがTABにフォーカスしなくなりました。最新のChromeでは、通知をクリックしても、元のタブにフォーカスされません。それはまだGmailで動作しますか?
hko 2013年

6
これは現在非推奨です。クロスブラウザソリューションについては、以下のOswaldoの回答を参照してください。
nickf 2015年

48

通知の使用。

if (typeof Notification !== 'undefined') {
  alert('Please us a modern version of Chrome, Firefox, Opera or Safari.');
  return;
}

Notification.requestPermission(function (permission) {
  if (permission !== 'granted') return;

  var notification = new Notification('Here is the title', {
    icon: 'http://path.to/my/icon.png',
    body: 'Some body text',
  });

  notification.onclick = function () {
    window.focus();
  };
});

window.focus();トリックを行います!正解としてマークする必要があります。
Maxime Lafarie 2016年

3
window.focus()クローム60、parent.focus()作品のあるジャズキャットソリューションでは動作しません
pikax 2017

これは機能しますが、[ショートカットの作成]オプションを使用してスタンドアロンアプリに変えるとすぐに、リダイレクトが機能せず、新しいタブが開きます。
waza_Be

26

window.focus()最近のWebkitブラウザバージョン(Chrome、Safariなど)では常に機能するとは限りません。しかし、parent.focus()そうです。

これが完全なjsfiddleです:https://jsfiddle.net/wv0w7uj7/3/

コード:

function notifyMe() {
  if (Notification.permission !== "granted")
    Notification.requestPermission();
  else {
    var notification = new Notification('Notification title', {
      icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
      body: "You've been notified!",
    });

    notification.onclick = function () {
      parent.focus();
      window.focus(); //just in case, older browsers
      this.close();
    };
  }
}

1
「この」だからではなく、コールの、anotheコンテキストに参照持つことが通常であるthis.close、それがコールする方が良いですevt.target.close「のonclick」イベントの: notification.onclick = function (evt) { evt.target.close(); }
アレハンドロ・シルバ

parent.focus(); 私のために働く!クロム68.0.3440.106に取り組んでいます
Johan Morales

2

onclickプロパティを使用したりaddEventListener、バニラJavaScriptまたはonjQueryのメソッドを使用したりすることはあまりお勧めできません。

var notify = new Notification('Test notification');

バニラ:

notify.addEventListener('click', function(e) {
    window.focus();
    e.target.close();
}, false);

jQuery:

$(notify).on('click', function(e) {
    window.focus();
    e.target.close();
});

0

次のようにthis.close()ではなくthis.cancel()、次のようになります。

var n = window.webkitNotifications.createNotification('ico.gif','Title', 'Text');
n.onclick = function(x) { window.focus(); this.cancel(); };
n.show();
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.