Javascript Girl
  1. Javascript Girl
  3. Comment se concentrer sur un onglet Chrome qui a créé une notification de bureau?
Intereting Posts
Insérer une balise <br /> après x mots en utilisant jQuery Comment passer le paramètre PHP array à la fonction Javascript? Comment composer des fonctions d'aridité variable en utilisant le flux de Lodash? Serialiser des chaînes contenant des apostrophes avec JSON.Net Effet d'image morphing jquery Impossible d'exécuter 'atob' sur 'Fenêtre' Javascript javascript équivalent jquery click ()? Comment changer le nom du fichier lors de l'exportation de données vers Excel? Comment désactiver la barre de localisation et les barres de défilement de la fenêtre pop dans Chrome? Existe-t-il un moyen complémentaire d'obtenir quelque chose comme des événements de souris? Manipulateurs d'événements, fermetures et collecte des ordures dans Javascript La courbe de Bezier à trois poignées place les points de contrôle RegEx: Comprendre le code anti-Syllable Vider les variables lorsque vous appelez la fonction javascript Requête MongoDB sur les champs peuplés

Comment se concentrer sur un onglet Chrome qui a créé une notification de bureau?

J'aimerais mettre en pratique les mêmes fonctionnalités que Gmail. Lorsque de nouveaux emails arrivent ou qu'un nouveau chat arrive, la fenêtre contextuelle apparaît et si vous cliquez dessus, l'onglet avec Gmail se concentre.

J'ai ce code: 

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

Lorsque je clique sur la notification, il suffit de disparaître. Maintenant, je dois ajouter du code à la fonction onclick pour afficher la page qui a créé cette notification. Je sais que c'est possible parce que GMail le fait très bien. Mais je n'ai pas réussi à examiner les sources de Gmail (elles sont minimisées et obscènes).

Quelqu'un sait comment faire cela?

Vous pouvez simplement placer window.focus () dans Google Chrome. Il se concentrera sur cette fenêtre lorsque vous aurez cliqué. 

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

J'ai ouvert l'inspecteur dans Gmail, j'ai ajouté le code ci-dessus, j'ai déménagé dans un autre onglet et l'ai couru. La notification est apparue et une fois cliqué, elle m'a ramené à Gmail.

J'espère que ça m'a aidé!

Utilisation des notifications . 

 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() ne fonctionne pas toujours dans les dernières versions du navigateur Webkit (Chrome, Safari, etc.). Mais parent.focus() fait.

Voici un jsfiddle complet: 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(); }; } }

Ce devrait être this.close() plutôt que this.cancel() , comme ceci: 

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

Ce n'est pas vraiment une bonne pratique d'utiliser la propriété onclick , utilisez le addEventListener pour vanilla javascript ou on méthode pour jQuery. 

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