如何关注创建桌面通知的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

您可以在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.

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