Retourner à la page d'accueil de TJS

Script notification : Gérer les notifications

Gérer les notifications depuis le navigateur
Partie II : L'interactivité / Chapitre 18 : Les notifications / Page 250

Exécution du script

Emulation de la console

Code source

<html><head><title>Notifications via le système d'exploitation</title></head><body><h1>Notifications via le système d'exploitation</h1><p>Cliquez sur ce bouton pour autoriser les notifications du site ToutJavaScript.com</p><div class="button" onclick="acceptNotification()">Accepter les notifications de TJS</div><div class="button" onclick="testNotification()">Tester une notification</div><div id="info"></div><script>function acceptNotification() {  /* Vérifier que le navigateur supporte les notifications */      if (typeof Notification === undefined) {    console.log("Les notifications ne sont pas supportées");    return false;    }    /* Demander l'autorisation si elle n'est pas encore accordée */  if (Notification.permission=="granted") {    console.log("Permission déjà accordée");    sendNotification("Confirmation", "Vous avez accepté les notifications de TJS");   } else if (Notification.permission=="denied") {    console.log("Permission déjà refusée");    var info=document.getElementById("info");    info.innerHTML="Vous avez déjà refusé les notifications de TJS";    info.style.display="block";    } else {    Notification.requestPermission(function(result) {      console.log("Vous avez choisi "+result);      if (result=="granted") {        var body="Vous recevrez des notifications quand de nouveaux contenus seront publiés";        sendNotification("Première notification", body, "first", "");      }    });    }}/* Affichage d'une notification */function sendNotification(titre, body, tag, url) {  var options={    tag: tag,    body: body,    icon: "https://www.toutjavascript.com/favicon.ico",    lang: "fr"  };  var notif=new Notification(titre, options);  if (url=="") { url="https://www.toutjavascript.com/"  }        notif.onclick=function() {    window.open(url);  }}/* Tester une notification */function testNotification() {  var body="Click automatique sur un lien avec JavaScript";  var url="https://www.toutjavascript.com/faq/index.php3?ID=103";  sendNotification("Nouvelle FAQ", body, "faq140", url);}</script><style type="text/css">div.button {  border:1px solid #999;  background: #ccc;  padding:3px;  display:inline-block;  border-radius: 4px;  cursor: pointer;  font-weight:bold;}div.button:hover {  color:#fff;      background: #000;}div#info {  position: absolute;  top:5px;  right:5px;  border:1px solid #000;  padding:5px;  background: #a00;  color:#fff;  font-weight: bold;  display: none;    }</style></body></html>

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...

Nouveau service en ligne de TJS

cleanMyJS : Détectez toutes les erreurs JavaScript de vos sitescleanMyJS.com
Détectez, enregistrez et analysez toutes les erreurs JavaScript de vos sites
Le 19/07/2019 06:50:03 sur php7 en 50.41 ms