it-swarm.com.de

Wie erhalte ich den Fokus auf einen Tab Chrome), auf dem Desktop-Benachrichtigungen erstellt wurden?

Ich möchte die gleichen Funktionen implementieren, die Google Mail heutzutage bietet. Wenn eine neue E-Mail eingeht oder ein neuer Chat eingeht, wird ein Benachrichtigungs-Popup angezeigt. Wenn Sie darauf klicken, wird der Tab mit Google Mail fokussiert.

Ich habe diesen Code:

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

Wenn ich auf Benachrichtigung klicke, verschwindet sie einfach. Jetzt muss ich der onclick-Funktion Code hinzufügen, um die Seite aufzurufen und zu fokussieren, die diese Benachrichtigung erstellt hat. Ich weiß, dass es möglich ist, weil GMail es sehr gut macht. Es ist mir jedoch nicht gelungen, in Google Mail-Quellen zu suchen (sie sind minimalisiert und verschleiert).

Weiß jemand, wie das geht?

76
Frodik

Sie können window.focus () einfach in Google Chrome platzieren. Wenn Sie darauf klicken, wird der Fokus auf dieses Fenster gelegt.

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

Ich habe den Inspektor in Google Mail geöffnet, den obigen Code hinzugefügt, auf einen anderen Tab gewechselt und ihn ausgeführt. Die Benachrichtigung wurde angezeigt und brachte mich nach dem Klicken zu Google Mail zurück.

97
Mohamed Mansour

Mit Benachrichtigungen .

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

window.focus() funktioniert nicht immer in den neuesten Webkit-Browserversionen (Chrome, Safari usw.). Aber parent.focus() tut es.

Hier ist eine vollständige Jsfiddle: https://jsfiddle.net/wv0w7uj7/3/

Code:

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

Die Verwendung der Eigenschaft onclick, der Methode addEventListener für Vanilla-Javascript oder der Methode on für jQuery ist nicht besonders empfehlenswert.

var notify = new Notification('Test notification');

Vanille:

notify.addEventListener('click', function(e) {
    window.focus();
    e.target.close();
}, false);

jQuery:

$(notify).on('click', function(e) {
    window.focus();
    e.target.close();
});
1
Tim

Es sollte this.close() sein und nicht this.cancel(), wie folgt:

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