js 调用浏览器的提示Web Notifications

54 篇文章 0 订阅
关于调用浏览器的提示:
Web Notifications是HTML5 的一个特性,目前我知道的有谷歌浏览器和windows edge对它进行了支持

function notice(data){
  data = data || {};
  if (window.Notification){

    //Notification类提供了一个requestPermission方法,用来请求用户授权,代码如下:
   //当这段代码执行时,浏览器会询问用户,是否允许该站点显示消息通知
   Notification.requestPermission(function(status) {
      //status是授权状态,如果用户允许显示桌面通知,则status为'granted'
      console.log('status: ' + status);
 
      //permission只读属性
      var permission = Notification.permission;
      //default 用户没有接收或拒绝授权请求 不能显示通知
      //granted 用户接受授权请求 允许显示通知
      //denied  用户拒绝授权请求 不允许显示通知
 
    console.log('permission: ' + permission);

    if(Notification.permission === 'granted'){
     var notification = new Notification(data.title||'', {
        body: data.content||''
        ,icon: data.avatar||'http://tp2.sinaimg.cn/5488749285/50/5719808192/1'
      });
    }else {
      Notification.requestPermission();
    };
  }


//onshow函数在消息框显示时会被调用
//可以做一些数据记录及定时操作等
notification.onshow = function() {
    console.log('notification shows up');
    //5秒后关闭消息框
    setTimeout(function() {
        n.close();
    }, 5000);
};
 
//消息框被点击时被调用
//可以打开相关的视图,同时关闭该消息框等操作
notification.onclick = function() {
    alert('open the associated view');
    //opening the view...
    n.close();
};
 
//当有错误发生时会onerror函数会被调用
//如果没有granted授权,创建Notification对象实例时,也会执行onerror函数
notification.onerror = function() {
    console.log('notification encounters an error');
};
 
//一个消息框关闭时onclose函数会被调用
notification.onclose = function() {
    console.log('notification is closed');
}
//调用
var data = {
  username:'马云',
  content:'我来了',
  avatar:'http://tp2.sinaimg.cn/5488749285/50/5719808192/1'
}
notice({
  title: '来自 '+ data.username +' 的消息'
  ,content: data.content
  ,avatar: data.avatar
});
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值