如何将焦点转移到创建桌面通知的 Chrome 选项卡？

Question

我想实现与 Gmail 现在相同的功能。当新电子邮件到达或新聊天出现时，会出现通知弹出窗口，如果您单击它，Gmail 选项卡就会获得焦点。

我有这样的代码：

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

当我单击通知时，它就会消失。现在我需要向 onclick 函数添加一些代码，以显示并聚焦创建此通知的页面。我知道这是可能的，因为 GMail 做得很好。但我没有成功地调查 Gmail 来源（它们被最小化和混淆）。

有人知道该怎么做吗？

Answer 1

您只需将 window.focus() 放置在 Google Chrome 中即可。单击时它将聚焦到该窗口。

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

我在 Gmail 中打开检查器，添加上述代码，移至另一个选项卡，然后运行它。通知出现了，点击后，我就回到了 Gmail。

Answer 2

使用通知。

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

Answer 3

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

Answer 4

使用 onclick 属性并不是很好的做法，对于普通 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();
});

Answer 5

它应该是 this.close() 而不是 this.cancel()，如下所示：

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