H5桌面消息通知Notification

发布于 9 年前作者 nasaplayer 7274 次浏览来自分享
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>html5桌面通知</title>
 </head>
 <body>
 <input type="button" value="开启桌面通知" onclick="showDeskTopNotice('','HTML5桌面消息');">
 <script>
 function showDeskTopNotice(title,msg){
 var Notification = window.Notification || window.mozNotification || window.webkitNotification;
 if(Notification){
 Notification.requestPermission(function(status){
 //status默认值'default'等同于拒绝 'denied' 意味着用户不想要通知 'granted' 意味着用户同意启用通知
 if("granted" != status){
 return;
 }else{
 var tag = "sds"+Math.random();
 var notify = new Notification(
 title,
 {
 dir:'auto',
 lang:'zh-CN',
 tag:tag,//实例化的notification的id
 icon:'http://www.yinshuajun.com/static/img/favicon.ico',//通知的缩略图,//icon 支持ico、png、jpg、jpeg格式
 body:msg //通知的具体内容
 }
 );
 notify.onclick=function(){
 //如果通知消息被点击,通知窗口将被激活
 window.focus();
 },
 notify.onerror = function () {
 console.log("HTML5桌面消息出错!!!");
 };
 notify.onshow = function () {
 setTimeout(function(){
 notify.close();
 },2000)
 };
 notify.onclose = function () {
 console.log("HTML5桌面消息关闭!!!");
 };
 }
 });
 }else{
 console.log("您的浏览器不支持桌面消息");
 }
 };
 showDeskTopNotice("","HTML5桌面消息")
 </script>
 </body>
</html>
H5桌面消息通知Notification - CNode技术社区
