简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > Tutoriel H5 > le corps du texte

Un exemple de code pour implémenter la fonction de rappel sur le bureau à l'aide de HTML5

零下一度
Libérer： 2017-04-22 14:37:54
original
2621 Les gens l'ont consulté

Présentation des notifications sur le bureau

La fonction de notification sur le bureau permet au navigateur d'avertir les utilisateurs des messages même lorsqu'ils sont réduits. C'est la combinaison la plus naturelle avec WebIM. Cependant, le seul navigateur qui prend actuellement en charge la fonction de notification sur le bureau est Chrome 5+. Dans le processus d'utilisation réel, l'interférence de la fonction de notification sur l'utilisateur doit être minimisée et l'apparition de la fonction de notification doit être minimisée. Cela nécessite de résoudre les problèmes suivants :

  • 1. Recevoir Assurez-vous qu'une seule notification apparaît lors de la réception de plusieurs messages ;

  • 2. Lorsque l'utilisateur est sur la page où la messagerie instantanée apparaît (la page est en état Focus), aucune notification n'apparaîtra ;

  • 3. Lorsque l'utilisateur utilise plusieurs onglets pour ouvrir plusieurs pages avec la messagerie instantanée, tant qu'une page est dans l'état Focus, aucune notification n'apparaîtra ;

  • 4. Comment Permettre aux utilisateurs de cliquer sur la couche flottante de notification pour localiser la fenêtre de discussion spécifique

  • 5. 🎜>

    • API de notification de rappel de bureau

window.webkitNotifications

    requestPermission demande d'autorisation de communication

    • checkPermission Vérifier l'autorisation de communication

    • createNotification Créer une communication

    • afficher Afficher la notification

    • Code Pour atteindre les

étudiants qui ont besoin d'apprendre le html5, veuillez faire attention au site Web php chinois 
<!DOCTYPE HTML>
<html>
<head
<meta charset="gbk">  
<title>Creating OS notifications in HTML5</title>
</head>
<body>
<input type="button" value="验证授权" onclick="init();" />
<input type="button" value="弹出消息" onclick="notify();" />

    <script type="text/javascript">
        const miao = 5;

        function init() {
            if (window.webkitNotifications) {
                window.webkitNotifications.requestPermission();
            }
        }

        function notify() {
            var icon = "logo.png";
            var title = "Hello World";
            var body =  "You Are My World (5秒后自动关闭)";

            if (window.webkitNotifications) {
                if (window.webkitNotifications.checkPermission() == 0) {
                    var popup = window.webkitNotifications.createNotification(icon, title, body);
					popup.ondisplay = function(event) {
                        setTimeout(function() {
                            event.currentTarget.cancel();
                        }, miao * 1000);
                    }
                    popup.show();
                    popup.show();
                } else {
                    window.webkitNotifications.requestPermission();
                    return;
                }
            }
        }
    </script>

</body>
</html>
Copier après la connexion
Tutoriels vidéo html5

De nombreux didacticiels vidéo html5 en ligne peuvent être. regardé gratuitement !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
HTML5，桌面提醒
source：php.cn
Article précédent：Utiliser HTML5 pour implémenter le code de l'effet de ligne pointillée Article suivant：Explication détaillée du code de communication du message en HTML5
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Pourquoi mon iframe ne se charge-t-elle pas dans cet extrait ? J'ai donc ici un petit morceau de code qui détecte s'il s'agit d'un navigateur mobile ou d...
Depuis 2023-09-15 11:06:40
0
1
283
Insérer le formatage HTML dans le corps de l'e-mail à l'aide de Suitescript J'ai écrit un script qui enverra une alerte par e-mail si un certain type de produit manqu...
Depuis 2023-09-09 20:41:10
0
1
304
La fenêtre contextuelle HeadlessUI n'est pas cliquable sur les appareils mobiles J'ai du mal à essayer de cliquer sur le menu contextuel HeadlessUI lorsque j'utilise un ap...
Depuis 2023-09-06 12:27:55
0
1
229
J'ai besoin d'aide pour corriger mon code html et java script Je veux créer un endroit où vous pourrez saisir votre prochain anniversaire et la page se ...
Depuis 2023-08-01 20:25:03
0
1
346
L'administrateur ajoute une question Excusez-moi, dans l'interface d'ajout d'administrateur, la modification de la base de donn...
Depuis 2020-03-20 21:13:58
0
2
843
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！