Как перейти на вкладку Chrome, которая создала уведомление на рабочем столе?

85

Я хотел бы реализовать ту же функциональность, что и в 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.
Brandito

Ответы:

109

Вы можете просто разместить 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
Вот Это Да ! Так просто ?! :-) Отличный ответ, спасибо. Я довольно долго искал это в Google, но не нашел. Теперь все работает отлично, еще раз спасибо.
Frodik 05
1
Нет проблем! Удачи взлома :-)
Мохамед Мансур
Теперь не работает jsfiddle.net/l2aelba/RhHgR :(, я могу взломать, например, do alert (), чтобы снова сфокусировать это окно
l2aelba
2
кто-нибудь знает, как это сейчас работает? Код больше не фокусируется на вкладке TAB. Это означает, что в последней версии Chrome нажатие на уведомление не фокусирует вкладку, с которой оно исходило. Он все еще работает в Gmail?
hko
6
Теперь это устарело , см. Ответ Освальдо ниже для кросс-браузерного решения.
nickf
49

Использование уведомлений .

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();делает свое дело! Его следует отметить как правильный ответ.
Максим Лафари
3
window.focus()не работает на chrome 60, решение jazzcat с parent.focus()работает
pikax 02
Это работает, но как только я использую опцию «Создать ярлык» и превращаю его в отдельное приложение, перенаправление не работает и открывает новую вкладку.
Waza_Be 03 мар.2020,
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();
    };
  }
}
jazzcat
источник
1
Это нормально, если this ссылается на другой контекст, поэтому вместо вызова this.closeлучше вызвать evt.target.closeсобытие onclick: notification.onclick = function (evt) { evt.target.close(); }
Алехандро Силва,
parent.focus (); работает на меня! работает над хромом 68.0.3440.106
Йохан Моралес
2

Это не очень хорошая практика onclick, использовать addEventListenerдля ванильного 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();
Надав Б
источник