本文摘自PHP中文网,作者黄舟,侵删。
这篇文章主要介绍了HTML5实现桌面通知 提示功能,非常不错,具有参考借鉴价值,需要的朋友参考下吧具体代码如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <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" );
}
})();
|
Notification.requestPermission()是个请求 ,让浏览器出现是否允许通知的提示 和 Notification.permission 一样 返回 "3"个值 "granted" "default" "denied" 户允许通知, 用户目前还没有管, 用户嫌弃
总结
以上就是H5实现桌面通知以及提示功能的实例的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
如何使用插件数字滚动插件numberanimate.js?
HTML5是h5吗
HTML5实践-使用css装饰图片画廊的代码分享(一)
HTML5如何插入可自动播放的音频(图文)
HTML5存储页面或应用程序的私有自定义数据的data-* 属性
用HTML5制作屏幕手势解锁功能
HTML5 figure标签是什么意思?HTML5 figure标签的使用方法详解
h5+js实现本地文件读取和写入
h5之scrollintoview用法详解
详细介绍h5弹性盒布局的使用(父容器属性)
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » H5实现桌面通知以及提示功能的实例