这篇文章主要介绍了HTML5实现桌面通知 提示功能,非常不错,具有参考借鉴价值,需要的朋友参考下吧
具体代码如下所示:
<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" 户允许通知, 用户目前还没有管, 用户嫌弃
以上所述是小编给大家介绍的HTML5实现桌面通知 提示功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
编程基础网
本文标题为:HTML5实现桌面通知 提示功能
基础教程推荐
猜你喜欢
- html网页中使用希腊字母的方法 2022-09-21
- ajax异步加载图片实例分析 2022-12-18
- 【vue】三种获取input值的写法 2023-10-08
- 使用HTML5中postMessage知识点解决Ajax中POST跨域问题 2022-10-17
- Ajax实现简单下拉选项效果【推荐】 2022-12-28
- JavaScript函数this指向问题详解 2023-08-12
- vue在install时node-sass@4.14.1 postinstall:node scripts/build.js错误解决 2023-07-09
- Ajax实现关键字联想和自动补全功能及遇到坑 2023-02-23
- AJAX实现数据的增删改查操作详解【java后台】 2023-02-23
- JavaScript开发简单易懂的Svelte实现原理详解 2023-08-12
