杨小杰Blog(Youngxj)提供免费教程下载和网站搭建技术教程,主要分享和发布网站源码,致力创造一个高质量网络资源教程的分享平台

HTML5之Notification消息通知案例

Young小杰2018-6-25 20:57 网站搭建(2)2816小标签: html5 javascript 原创

HTML5之Notification消息通知案例

html5桌面消息.png


<script>
	var popNotice = function() {
		//获取用户授权状态
        if (Notification.permission == "granted") {  
            var notification = new Notification("Hi,Youngxj", {  
                //很明显这是正文
                body: '可以加你为好友吗?',
                //很明显这是图标  
                icon: 'https://ww2.sinaimg.cn/large/005BYqpgly1fsnpxsctd7j305k05kwec.jpg'  
            });  
            //消息被点击事件
            notification.onclick = function() {  
                alert('别逗了,我们永远都是朋友');
				//窗口关闭动作
                notification.close();      
            };  
			//消息被关闭事件
            notification.onclose  = function() {  
                alert('朋友,告辞');  
                notification.close();      
            };
			//消息出现错误事件
            notification.onerror  = function() {  
                alert('上帝也不知道发生了什么');  
                notification.close();      
            };
        }      
    };  
  
    if (window.Notification) {  
        if (Notification.permission == "granted") {  
            popNotice();  
        }else if( Notification.permission != "denied"){  
            Notification.requestPermission(function (permission) {  
              popNotice();  
            });  
        }  
    } else {  
        alert('浏览器不支持Notification');      
    }  
</script>
因为是HTML5的,所以很多老浏览器并不支持,自己百度适配浏览器。


这个可以用作实时消息提醒,和消息推送,只要该网站是被允许提示的。


本文最后更新于2018-6-25,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

发表评论:

评论列表:

  • Young小杰 站长

    又一天过去了,怎么样,是不是梦想更遥远了?

  • 嗯,不错不错。多多加油

  • 手机扫描二维码
    阅读体验更佳