Maison > Article > interface Web > Un exemple de code pour implémenter la fonction de rappel sur le bureau à l'aide de HTML5

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

零下一度original: 2017-04-22 14:37:542655parcourir

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. 🎜>

window.webkitNotifications

é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>

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!

Déclaration：

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

Article précédent：Utiliser HTML5 pour implémenter le code de l'effet de ligne pointilléeArticle suivant：Utiliser HTML5 pour implémenter le code de l'effet de ligne pointillée

Articles Liés

Voir plus