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"); } })();
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!