Rappel du bureau HTML5 : introduction à l'application Notifycations_compétences du didacticiel HTML5

Les rappels de bureau (notifications Web) en HTML5 peuvent faire apparaître une boîte de message dans la fenêtre de la page actuelle. Cette boîte de message s'étend sur les fenêtres d'onglets. Cela rend le rappel plus pratique et plus facile pour les utilisateurs de voir lorsqu'ils ouvrent plusieurs onglets pour naviguer sur le Web. Actuellement, seul le noyau du webkit prend en charge cette fonctionnalité.
Cette fonctionnalité doit être ouverte en mode http dans Chrome pour l'activer.
La fonction de rappel du bureau est implémentée par l'objet window.webkitNotifications (noyau webkit).
L'objet window.webkitNotifications n'a aucun attribut et dispose de quatre méthodes :
1.requestPermission()
　Cette méthode est utilisée pour demander l'autorisation de rappel de message à l'utilisateur si cette autorisation. n'est pas actuellement ouvert, le navigateur affichera l'interface d'autorisation. Après l'autorisation de l'utilisateur, une valeur de statut (un entier de 0, 1 ou 2) est générée à l'intérieur de l'objet :
0 : indique que l'utilisateur accepte le rappel de message, et la fonction de rappel de message ne peut être utilisée que dans cet état.
1 : Indique l'état par défaut, l'utilisateur ne rejette ni n'accepte
2 : Indique que l'utilisateur rejette le rappel de message.
2.checkPermission()
　 Cette méthode est utilisée pour obtenir la valeur d'état de l'autorisation demandée par requestPermission().
3.createNotification()
Cette méthode crée un message de rappel sous forme de message pur. Elle accepte trois paramètres de chaîne :
iconURL : l'adresse de l'icône affichée dans le message,
title : le titre du message,
body : le contenu textuel du corps du message
Cette méthode renverra un objet Notification, et d'autres paramètres peuvent être définis pour cet objet.
Attributs et méthodes de l'objet Notification :

Copier le code

Le code est le suivant :

dir : ""
onclick : null
onclose : null
ondisplay : fonction (événement) {
onerror : null
onshow : null
replaceId : ""
tag : ""
__proto__ : Notification
addEventListener : function addEventListener() { [code natif] }
annuler : fonction annuler() { [code natif] }
close : fonction fermer( ) { [ code natif] }
constructeur : function Notification() { [code natif] }
dispatchEvent : fonction dispatchEvent() { [code natif] }
removeEventListener : fonction removeEventListener() { [code natif ] }
show: function show() { [code natif] }
__proto__ : Objet

dir : Définit le sens de disposition des messages. Les valeurs possibles sont "auto". (automatique), "ltr "(de gauche à droite), "rtl"(de droite à gauche).
Tag : ajoutez un nom de tag au message. Si cet attribut est défini, 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 boîte de message, et cette dernière boîte de message remplacera la précédente. Sinon, plusieurs boîtes d'invite de message apparaîtront, mais. un maximum de 3 boîtes de message s'afficheront. S'il y en a plus de 3, les notifications de messages suivantes seront bloquées.
onshow : Cet événement est déclenché lorsque la boîte de message est affichée ;
onclick : Cet événement est déclenché lorsque l'on clique sur la boîte de message ;
onclose : Cet événement est déclenché lorsque le message est fermé ; onerror : Lorsque cet événement est déclenché lorsqu'une erreur se produit ;
Méthodes :
addEventListener && removeEventListener : méthodes conventionnelles pour ajouter et supprimer des événements ;
show : afficher la boîte de rappel du message
close : fermer le boîte de rappel de message ;
Annuler : fermez la boîte de rappel de message, de la même manière que close

4.createHTMLNotification() Cette méthode est différente de createNotification() en ce sens qu'elle crée le message en HTML et accepte un paramètre : L'URL du fichier HTML. Cette méthode renvoie également l'objet Notification.
Un exemple :

Copiez le codeLe code est le suivant :

;



頭>



表格>

document.getElementById("trynotification").onclick = function(){
notify(Math.random());
};
函數notify(tab) {
if (! window.webkitNotifications) {
回傳false;
}
var 權限= window.webkitNotifications.checkPermission();
if(permission!=0){
window.webkitNotifications.requestPermission( ;
var requestTime = new Date();
var waitTime = 5000;
var checkPerMiniSec = 100;
setTimeout(function(){
permission =
setTimeout(function(){
permission = window.webeck.mations().
if(permission==0){
createNotification(tab);
}else if(new Date) ()-requestTimesetTimeout(arguments.callee,checkPerMiniSec) }
},checkPerMiniSec);
}else if(permission==0){
createNotification(tab);
}
}
function createNotification( >var showSec = 10000;
var icon = "http://tech.baidu.com/resource/img/logo_news_137_46.png";
var title = "[" new Date().toLocaleTimeString() " ] 在" (showSec/1000) " 秒後關閉；
var body = "你好世界，我是webkitNotifications informations";
var bodypopup = window.webkitNotifications.createNotification(icon, title, body)
popup.tag = tab;
popup.ondisplay = function(event) {
setTimeout(function() {
event.currentTarget.cancel();
}, showSec);
}
popup.show();
}
腳本>
身體>