zoukankan      html  css  js  c++  java
  • HTML5之Notification简单使用

    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('我关闭了通知');
    });
    
  • 相关阅读:
    java笔记之输入输出流
    英文单词个数统计及排序
    课后作业_程序员修炼之道读后感
    第五周-内网穿透简易搭建(远程查看javaweb程序)
    第五周总结
    结对开发
    第四周学习总结
    第四周--爬虫的学习
    第四周学习总结
    第三周---------学习动态规划
  • 原文地址:https://www.cnblogs.com/xiaoyucoding/p/8057691.html
Copyright © 2011-2022 走看看