码迷,mamicode.com
首页 > Web开发 > 详细

HTML5之Notification简单使用

时间:2017-12-18 19:09:38      阅读:310      评论:0      收藏:0      [点我收藏+]

标签:markdown   null   turn   window   perm   res   rmi   var   button   

var webNotification = {
  init: function() {
    if(!this.isSupport()) {
      console.log(‘不支持通知‘);
      return;
    }
    this.initElement();
    this.initPermission();
  },
  isSupport: function() {
    return !!window.Notification;
  },
  element: null,
  isPermission: false,
  initElement: function() {
    var element = document.createElement(‘button‘);
    element.type = ‘button‘;
    element.style = ‘position: absolute;top: -100px;‘;
    element.onclick = function() {
      Notification.requestPermission(function(result) {
        console.log(‘result:‘ + result);
        if(result === ‘granted‘) {
          this.isPermission = true;
        } else {
          this.isPermission = false;
        }
      }.bind(this));
    }.bind(this);
    document.body.appendChild(element);
    this.element = element;
  },
  initPermission: function() {
    this.element.click();
  },
  notify: function(title, options, clickCallback, closeCallback) {
    var notification = new Notification(title, options);
    notification.onclick = clickCallback;
    notification.onclose = closeCallback;
    return notification;
  }
};

初始化

webNotification.init();

测试

webNotification.notify(‘我是标题‘, {
  body: ‘我是通知内容‘,
  icon: ‘/favicon.ico‘,
}, function() {
  alert(‘我点击了通知‘);
}, function() {
  alert(‘我关闭了通知‘);
});

HTML5之Notification简单使用

标签:markdown   null   turn   window   perm   res   rmi   var   button   

原文地址:http://www.cnblogs.com/xiaoyucoding/p/8057691.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!