本文摘自PHP中文网,作者php中世界最好的语言,侵删。
这次给大家带来H5实现桌面通知,H5实现桌面通知的注意事项有哪些,下面就是实战案例,一起来看一下。具体代码如下所示:
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" 户允许通知, 用户目前还没有管, 用户嫌弃
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
H5怎么实现在线预览PDF
H5+C3实现时钟效果
以上就是H5实现桌面通知的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
如何利用HTML5实现等待加载动画的效果
HTML5能做什么
h5手机扫码怎么实现
什么是HTML5技术
HTML5与html的区别有哪些?HTML5与html四大区别总结
怎么学HTML5?
css中display: inline-block的用法解析
如何使用canvas画出平滑的曲线?(代码)
使用php和HTML5 formdata实现无刷新文件上传
详解HTML5 placeholder属性
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » H5实现桌面通知