如何聚焦于创建了桌面通知的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通道中弃用并删除。
布兰迪托

Answers:


107

您可以仅将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。


3
哇 !这么简单?:-)好的答案,谢谢。我用谷歌搜索了好一阵子,但是找不到。现在工作正常,再次感谢。
Frodik

1
没问题!祝您玩得开心::)
Mohamed Mansour

现在不能正常工作jsfiddle.net/l2aelba/RhHgR :(,我可以像alert()一样将其聚焦在窗口上
l2aelba

2
有人知道现在如何运作吗?代码不再关注TAB。.这意味着在最新的Chrome浏览器中,单击通知将不关注其来源标签。仍然可以使用gmail吗?
hko

6
现在已弃用此方法,有关跨浏览器解决方案,请参见下面的Oswaldo回答。
尼克

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's

3
window.focus()在chrome 60上无法正常工作,而jazzcat解决方案可以parent.focus()正常工作
pikax

这可行,但是一旦我使用“创建快捷方式”选项并将其变成独立的应用程序,重定向将无法正常工作并打开一个新标签。
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
让“ this”引用另一个上下文环境是正常的,因此this.close最好不要调用evt.target.close“ onclick”事件: notification.onclick = function (evt) { evt.target.close(); }
Alejandro Silva

parent.focus(); 为我工作!工作对铬68.0.3440.106
约翰·莫拉莱斯

2

使用该onclick属性,addEventListener对javascript使用javascript或on对jQuery的方法并不是很好的做法。

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();
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.