Commentaire: Les notifications de bureau dans HTML5 peuvent faire apparaître une zone de message dans la fenêtre de la page actuelle. Cette boîte de message s'étend sur la fenêtre d'onglet. Ce rappel est plus pratique lorsque les utilisateurs ouvrent plusieurs onglets pour parcourir la page Web et sont faciles à voir.
Les notifications de bureau dans HTML5 peuvent faire apparaître une zone de message dans la fenêtre de la page actuelle. Cette boîte de message s'étend sur la fenêtre d'onglet. Ce rappel est plus pratique et facile à voir pour les utilisateurs lorsque les utilisateurs ouvrent plusieurs onglets pour parcourir les pages Web. Actuellement, tant que le noyau WebKit prend en charge cette fonction.Cette fonctionnalité doit être activée en chrome en mode HTTP.
La fonction de rappel de bureau est implémentée par l'objet Window.WebkitNotifications (WEBKIT KERNEL).
L'objet Window.WebkitNotifications n'a pas d'attributs, et il existe quatre méthodes:
1.RequestPermission ()
Cette méthode est utilisée pour demander l'autorisation de rappel du message à l'utilisateur. Si l'autorisation n'est pas actuellement ouverte, le navigateur apparaîtra dans l'interface d'autorisation. Après l'autorisation de l'utilisateur, une valeur d'état (un entier de 0, 1 ou 2) est généré à l'intérieur de l'objet:
0: Cela signifie que l'utilisateur accepte le rappel du message et que la fonction de rappel des informations ne peut être utilisée que dans cet état;
1: indique l'état par défaut, l'utilisateur ne rejette ni n'est d'accord;
2: Indique que l'utilisateur refuse le rappel du message.
2.CheckPermission ()
Cette méthode est utilisée pour obtenir la valeur d'état de l'autorisation demandée par RequestPermission ().
3.Createenotification ()
Cette méthode crée un message de rappel dans un message pur, qui accepte trois paramètres de chaîne:
iconurl: l'adresse d'icône affichée dans le message,
Titre: le titre du message,
Corps: Message Body Text Content
Cette méthode renverra un objet de notification, qui peut être défini pour plus.
Propriétés et méthodes de notification Objet:
dir: ""
onclick: null
onclose: null
onDisplay: fonction (événement) {
OneError: null
ONSHOW: NULL
Remplaceid: ""
étiqueter: ""
__proto__: Notification
addEventListener: fonction addEventListener () {[code natif]}
Annuler: fonction annule () {[code natif]}
Close: fonction close () {[code natif]}
constructeur: notification de fonction () {[code natif]}
DispatchEvent: fonction DispatchEvent () {[code natif]}
retireEventListener: fonction reouseventListener () {[code natif]}
show: fonction show () {[code natif]}
__proto__: objet
DIR: Définissez la direction de la disposition des messages, les valeurs peuvent être prises en tant qu'auto (auto), LTR (de gauche à droite), RTL (de droite à gauche).
Tag: ajoutez un nom de balise au message. Si cette propriété est définie, lorsqu'il y a un nouveau rappel de message, les messages avec la même étiquette ne seront affichés que dans la même zone de message, et le dernier case de message remplacera le précédent. Sinon, plusieurs cases d'invite de message apparaîtront, mais la valeur maximale affichera 3 boîtes de message, si plus de 3, la notification de message ultérieure sera bloquée.
Onshow: déclenche lorsque la zone de message s'affiche;
onClick: Cet événement est déclenché lorsque la zone de message est cliquée;
onClose: déclenche lorsque le message est fermé;
onError: déclenche l'événement lorsqu'une erreur se produit;
méthode:
AddEventListener && re SupportEventListener: Général Add et supprimer les méthodes d'événements;
Afficher: Afficher la boîte de rappel des messages;
Fermer: fermez la boîte de rappel du message;
Annuler: Fermez la boîte de rappel du message, comme fermez;
4.CreateHtmlNotification ()
La différence entre cette méthode et la créationotification () est qu'elle crée un message dans HTML, acceptant un paramètre: l'URL du fichier HTML, et cette méthode renvoie également l'objet de notification.
Un exemple:
<! Doctype html>
<html>
<adal>
<Title> Notifications dans HTML5 </TITME>
</ head>
<body>
<formulaire
<entrée type = "bouton" value = "Envoyer la notification" />
</ form>
<script type = "text / javascript">
document.getElementById ("tryNotification"). onclick = function () {
notify (math.random ());
};
fonction notify (tab) {
if (! window.webkitNotifications) {
retourne false;
}
var permission = window.webkitNotifications.CheckPermission ();
if (permission! = 0) {
window.webkitNotifications.requestPermission ();
var requesttime = new Date ();
Var Time Wait = 5000;
var checkPerminisec = 100;
setTimeout (function () {
permission = window.webkitNotifications.CheckPermission ();
if (permission == 0) {
créationotification (onglet);
} else if (new Date () - requesttime <waithetime) {
setTimeout (arguments.callee, checkPerminisec);
}
}, checkPerMinisec);
} else if (permission == 0) {
créationotification (onglet);
}
}
Fonction CreenOtification (Tab) {
var showsec = 10000;
var icon = "http://tech.baidu.com/resource/img/logo_news_137_46.png";
var + new Date (). TolocaleTimeString () + "] Fermer après" + (showec / 1000) + "secondes";
var body = "Hello World, je suis des informations webkitnotifications";
var popup = window.webkitNotifications.Creenotification (icône, titre, corps);
popup.tag = tab;
popup.ondisplay = fonction (événement) {
setTimeout (function () {
event.currentTarget.cancel ();
}, showec);
}
popup.show ();
}
</cript>
</docy>
</html>