Home > Web Front-end > H5 Tutorial > Implementation of HTML5 desktop notification prompt function

Implementation of HTML5 desktop notification prompt function

小云云
Release: 2017-12-07 16:03:45
Original
2616 people have browsed it

HTML5 gives web pages better meaning and structure. Richer tags will come with support for RDFa, microdata and microformats, building a data-driven Web that is more valuable to both programs and users. In this article, we will share with you how to implement the desktop notification prompt function in HTML5.

The specific code is as follows:


<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");
    }
})();
Copy after login


##Notification.requestPermission() is a request to let the browser show whether The prompt to allow notifications returns the same "3" values ​​as Notification.permission. "granted" "default" "denied" The user allows the notification. The user has not yet managed it, and the user dislikes it.

Related recommendations:

HTML5 Desktop Notification Notification API Usage

html5 Desktop Notification (Web Notifications) Example Analysis_html5 Tutorial Skills

H5 Example of Implementing Desktop Notification and Prompt Function

The above is the detailed content of Implementation of HTML5 desktop notification prompt function. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template