侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

HTML5 桌面通知

2024-05-15 星期三 / 0 评论 / 0 点赞 / 77 阅读 / 2390 字

Notification Properties title:"标题:"body:"内容"icon:"图片地址"C/em%3>tag:"1"// 通知框ID,相同id可替换,而不是出现新的通知框lang

Notification

Properties

title:"标题:"body:"内容"icon:"图片地址"C/em%3>tag:"1"// 通知框ID,相同id可替换,而不是出现新的通知框lang:""// 语言dir:"auto"// 文字方向

new Notification('别动神仙说:', {  body: '这里是body',  icon: 'http://q4.qlogo.cn/g?b=qq&k=icUjVAN5Ja7BCDQ1ICl8Svw&s=40',  tag: 1});

onshow: null // 显示通知框时调用onclick: null // 点击通知框时调用onclose: null // 点击通知框关闭按钮时调用onerror: null

例如实现通知弹出一段时间后自动关闭

var notification = new Notification('标题');notification.onshow = function () {  setTimeout(function () {    notification.close();  }, 3000);}

Notification.permission 有三种状态

  • default:未设置过为这个状态,通过Notification.requestPermission()可以询问用户是否允许通知
  • granted:用户点击允许后的状态
  • denied: 用户点击拒绝后的状态,通知框不可用

Methods

Notification.requestPermission() 一般在Notification.permission === 'default'时,用户通过点击等操作调用

document.onclick = function() {  Notification.requestPermission()}使用回调

 

Notification.requestPermission(function (permission) {  // 可在确认后直接弹出  if (permission === 'granted') {    var notification = new Notification('弹窗');  }});

Notification.close() 通知框关闭

function notify() {  if (!("Notification"in window)) {    alert("This browser does not support desktop notification");    return;  }  if (Notification.permission ==="granted") {    var notification = new Notification("Hi there!");  }  else if (Notification.permission === 'default') {    Notification.requestPermission(function (permission) {      if (permission ==="granted") {        var notification = new Notification("Hi there!");      }    });  }}

广告 广告

评论区