本文摘自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实现桌面通知的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
canvas与h5如何实现视频截图功能
HTML5中怎么用js?
HTML5关于web sql数据库的详细介绍
介绍一个用HTML5 canvas 制作的时钟
使用HTML5给按钮背景设计不同的动画的简单示例(图文)
浏览器兼容HTML5和css3的问题
h5和c3怎样做出太阳系行星运转的动画效果
HTML5标准学习-简介介绍
HTML5-xmlhttprequest level 2概述详解
关于h5的事件属性详解
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » H5实现桌面通知