Maison > interface Web > Tutoriel H5 > Exemples de H5 implémentant des fonctions de notification et d'invite sur le bureau

Exemples de H5 implémentant des fonctions de notification et d'invite sur le bureau

黄舟
Libérer: 2017-10-16 11:14:00
original
2867 Les gens l'ont consulté

Cet article présente principalement l'implémentation de la fonction d'invite de notification sur le bureau en HTML5. Il est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer

Le code spécifique est le suivant :


<button id="button">有人想加你为好友</button>
<p id="text"></p>
;(function (){
    if(window.Notification){
        var btn = document.getElementById("button");
        var txt = document.getElementById("text");
        btn.onclick = function (){
            if(Notification.permission == "granted"){
                popNotice();
            }else if(Notification.permission != "denied"){
                Notification.requestPermission().then(function (permission){
                    popNotice()
                })
            }
        };
        function popNotice(){
            if(Notification.permission == "granted"){
                var notification = new Notification("你好:",{
                    body:"请问今晚有空吗",
                    icon:"http://image.zhangxinxu.com/左边头像地址"
                });
                notification.onclick = function (){
                    txt.innerHTML = new Date().toTimeString().split(" ")[0]+"收到信息";
                    notification.close();
                }
            }
        }
    }else{
        console.log("浏览器不支持Notification");
    }
})();
Copier après la connexion

Notification.requestPermission() est une requête qui permet au navigateur de demander s'il doit autoriser les notifications, elle renvoie "3" valeurs "accordées" ". par défaut" "refusé" L'utilisateur autorise les notifications. , les utilisateurs ne s'en sont pas encore occupés, les utilisateurs ne l'aiment pas

Résumé

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:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal