首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何获得焦点到创建桌面通知的Chrome选项卡?

如何获得焦点到创建桌面通知的Chrome选项卡?
EN

Stack Overflow用户
提问于 2011-02-05 21:03:10
回答 5查看 33.6K关注 0票数 88

我想实现和Gmail一样的功能。当新的电子邮件到达或新的聊天到来时,会出现通知弹出窗口,如果你点击它,带有Gmail的选项卡将被聚焦。

我有这样的代码:

代码语言:javascript
复制
var n = window.webkitNotifications.createNotification('ico.gif', 'Title', 'Text');
n.onclick = function(x) { this.cancel(); };
n.show();

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

有人知道怎么做吗?

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2011-02-06 01:13:13

你可以直接把window.focus()放在Google Chrome中。当单击时,它将聚焦到该窗口。

代码语言:javascript
复制
var n = window.webkitNotifications.createNotification('ico.gif', 'Title', 'Text');
n.onclick = function(x) { window.focus(); this.close(); };
n.show();

我在Gmail中打开检查器,添加上面的代码,移动到不同的选项卡,然后运行它。通知出现了,一旦点击,它就把我带回Gmail。

票数 112
EN

Stack Overflow用户

发布于 2015-02-08 14:22:57

使用Notifications

代码语言:javascript
复制
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();
  };
});
票数 52
EN

Stack Overflow用户

发布于 2016-12-05 06:18:08

window.focus()在最新的Webkit浏览器版本(Chrome、Safari等)中并不总是有效。但是parent.focus()有。

下面是一个完整的jsfiddle:https://jsfiddle.net/wv0w7uj7/3/

代码:

代码语言:javascript
复制
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();
    };
  }
}
票数 30
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4906976

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档