zoukankan      html  css  js  c++  java
  • H5 _浏览器通知功能使用

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Notification</title>
     6 </head>
     7 <body>
     8     <div class="content">
     9         <button id="creatNotification">Creat</button>
    10         <button id="closeNotification">Close</button>
    11     </div>
    12     <script>
    13         var page = {
    14             data : {
    15                 Notification : '',
    16                 count        : 0
    17             },
    18             init : function(){
    19                 this.bindEvent();
    20             },
    21             bindEvent : function(){
    22                 var _this = this,
    23                     creatN = document.getElementById('creatNotification'),
    24                     closeN = document.getElementById('closeNotification');
    25                 creatN.onclick = function(){
    26                     _this.creatNotification();
    27                 }
    28                 closeN.onclick = function(){
    29                     _this.closeNotification();
    30                 }
    31             },
    32             /*
    33                 Notification对象permission属性:
    34                 default :用户尚未配浏览器请求显示通知权限。
    35                 grant   :有显示通知权限。
    36                 denied  :拒绝显示通知权限。
    37             */
    38             creatNotification : function(){
    39                 var _this = this;
    40                 if(window.Notification.permission === 'granted'){
    41                     //创建通知
    42                     _this.data.Notification = new Notification('简单文本通知',{
    43                         dir  : 'ltr',//通知的文字方向
    44                         // icon : 'icon',
    45                         tag  : 'MyID',//值为字符串,指定通知的唯一标识
    46                         body : '这是第'+ (++_this.data.count) + '通知内容'
    47                     });
    48                     //通知被显示
    49                     _this.data.Notification.onshow = function(){
    50                         alert('通知被显示');
    51                     }
    52                     //通知被关闭
    53                     _this.data.Notification.onclose = function(){
    54                         // _this.data.count--;
    55                         alert('通知被关闭');
    56                     }
    57                     //通知被点击
    58                     _this.data.Notification.onclick = function(){
    59                         alert('通知被点击');
    60                     }
    61                     // onerror 事件
    62                     _this.data.Notification.onerror = function(e){
    63                         //e代表被捕捉到的错误对象
    64                         alert('error')
    65                     }
    66                 }
    67                 else if (window.Notification.permission === 'default'){
    68                     window.Notification.requestPermission();
    69                 }
    70             },
    71             closeNotification : function(){
    72                 //close()方法关闭通知
    73                 this.data.Notification.close();
    74             }
    75         }
    76         window.onload = page.init();
    77     </script>
    78 </body>
    79 </html>
  • 相关阅读:
    git 还原某个文件~~~
    uniqid()
    array_filter 过滤一维中空数组,数组的序列不变
    加密 解密
    gitlab基本维护和使用
    vim 单文件中查找方法
    php数组定义
    $('.goods_tag_ids_all')[0].checked = true;//~~~~~ 单条改变checkbox 属性样式
    由买冰箱想到的
    2014年年终总结
  • 原文地址:https://www.cnblogs.com/LinSL/p/8668785.html
Copyright © 2011-2022 走看看