web-dev-qa-db-ja.com

デスクトップ通知を作成したChromeタブにフォーカスを当てる方法は？

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

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

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

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

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

javascriptgoogle-chromewebkitnotificationsgmail
76
Frodik

Google Chromeにwindow.focus（）を配置するだけです。クリックすると、そのウィンドウにフォーカスします。

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

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

97
Mohamed Mansour

Notifications を使用します。

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();
  };
});
46
Oswaldo Alvarez

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();
    };
  }
}
22
jazzcat

onclickプロパティを使用したり、Vanilla javascriptの場合はaddEventListenerを使用したり、jQueryの場合はonメソッドを使用したりすることは、あまり良い方法ではありません。

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();
});
1
Tim

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

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