如何将焦点放在创建桌面通知的 Chrome 选项卡上？答案

【问题标题】：How to get focus to a Chrome tab which created desktop notification?如何将焦点放在创建桌面通知的 Chrome 选项卡上？
【发布时间】：2011-06-21 20:59:45
【问题描述】：

我想实现与现在的 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 频道中被弃用和删除。

标签： javascript google-chrome webkit notifications gmail

【解决方案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。

【讨论】：

哇！这么简单？！ :-) 很好的答案，谢谢。我用谷歌搜索了很长时间，但找不到它。现在完美运行，再次感谢。
没问题！玩得开心 :-)
现在不工作 jsfiddle.net/l2aelba/RhHgR :( ，我可以像做 alert() 一样破解来聚焦这个窗口
该死，抱歉，JSfiddle 使用 iframe，忘记了：P
有谁知道它现在是如何工作的？代码不再关注 TAB。这意味着在最新的 Chrome 中单击通知不会关注它来自的选项卡。它还在 gmail 中工作吗？

【解决方案2】：

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

【讨论】：

window.focus(); 成功了！它应该被标记为正确答案。
window.focus() 在 chrome 60 上不起作用，带有 parent.focus() 的 jazzcat 解决方案有效
这可行，但是一旦我使用“创建快捷方式”选项并将其转换为独立应用程序，重定向不起作用并打开一个新选项卡。

【解决方案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();
    };
  }
}

【讨论】：

'this' 引用另一个上下文是正常的，所以不要调用this.close，最好调用'onclick' 事件的evt.target.close：notification.onclick = function (evt) { evt.target.close(); }
parent.focus();为我工作！使用 chrome 68.0.3440.106
我们可以添加 onload ="parent.focus(); window.focus();"到元素？

【解决方案4】：

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

【讨论】：

【解决方案5】：

应该是this.close()而不是this.cancel()，像这样：

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

【讨论】：