精华内容
下载资源
问答
  • 浏览器消息通知,桌面消息提醒

    千次阅读 2019-06-18 17:51:09
    var notification = new Notification('来消息了', { body: '可以加你为好友吗?', icon: 'http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg', }); notification.onclick = function() { window....
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>桌面提示信息</title>
    </head>
    <body>
    
    <button οnclick="notifyMe()">Notify me!</button>
    <script>
    
        function notifyMe() {
            // 先检查浏览器是否支持
            if (!("Notification" in window)) {
                alert("This browser does not support desktop notification");
            }
    
            // 检查用户是否同意接受通知
            else if (Notification.permission === "granted") {
                var notification = new Notification('来消息了', {
                    body: '可以加你为好友吗?',
                    icon: 'http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg',
    
                });
                notification.onclick = function() {
                    window.focus();//打开对应的页面
                    notification.close();//关闭提示信息
                };
                //定时关闭
                notification.onshow = function () {//定时关闭
                    setTimeout(notification.close.bind(notification), 3000);
                }
            }
    
            // 否则我们需要向用户获取权限
            else if (Notification.permission !== 'denied') {
                Notification.requestPermission(function (permission) {
                    // 如果用户同意,就可以向他们发送通知
                    if (permission === "granted") {
                        var notification = new Notification('111', {
                            body: '第一次点击同意提示,显示本条信息。'
                        });
                    }
                });
            }
    
        }
    
    </script>
    展开全文
  • 就是这个东西,桌面右下角通知 接口 var notification = new Notification(title, options) title: 通知权限 granted: //用户已经明确的授予了显示通知的权限。. denied: //用户已经明确的拒绝了显示通知的...

    就是这个东西,桌面右下角通知
    在这里插入图片描述 在这里插入图片描述

    1. 接口

      var notification = new Notification(title, options)
      
      title: //通知标题
      options={
      	dir:  //auto自动;ltr 从左到右;rtl 从右到左;
      	lang: //指定通知使用的语言
      	body: //通知中额外显示的字符串
      	icon: //图片的URL,用于通知的图标;
      }
      
    2. 通知权限

      granted: //用户已经明确的授予了显示通知的权限。.
      denied:  //用户已经明确的拒绝了显示通知的权限。
      default: //用户还未被询问是否授权; 这种情况下权限将视为 denied.
      
    3. 请求权限

      Notification.requestPermission()
      
    4. 回调函数

      show: //通知显示给用户时触发。
      click: //用户点击通知时触发。
      close: //用户关闭通知时触发。
      error: //通知出错时触发(大多数发生在通知无法正确显示时)。
      
    5. 实例

       created(){
          this.notify()
        },
       methods:{
          notify(){
            if (!(window.Notification)) {      // 判断浏览器是否支持
              alert('您的浏览器不支持消息通知')
            }
            else if(Notification.permission=='granted'){  //通知权限授予直接发送消息
              var notification=new Notification('新通知',{
                body:'您有新任务待接收'
              });
            }
            else if(Notification.permission != 'denied'){   //通知权限不明确发送请求
              Notification.requestPermission().then(function(result){
              if(result=='granted'){
                  var notification=new Notification('新通知',{
                body:'您有新任务待接收'
              });
              }
              })  
            }
          }
        }
      
    展开全文
  • iziToast.js是一款纯js跨浏览器响应式消息通知插件。该消息通知插件体积小,使用简单。消息显示时带CSS3动画效果,时尚大方。它的特点还有: 自带4种主题效果: info, warning, error 和 success。 可以自定义主题...
  • 随后您就可以使用订阅码将消息通过浏览器通知的形式推送到安卓/ Linux / Windows / Mac等通知栏处(IOS暂不支持)。即使你关闭了网页,你仍然可以收到通知。 如果你需要从你自己的服务器发送消息,你可以使用这里的 ...
  • 浏览器通知 的通知 ... if(Notification.permission != "granted" ){ //如果该网站的 还没有被授予 通知权限需要向客户索要 Notification.... var notification = new Notification('消息通知', // 这个

    前端通过 js 代码 来发出 浏览器通知
    在这里插入图片描述

    try {     // 支持   ie不行 eage 可以 ,谷歌,火狐 都行 需要 https  或者是 localhost
    
     if(Notification.permission != "granted" ){  //如果该网站的 还没有被授予 通知权限需要向客户索要
         Notification.requestPermission();   //向用户询问
     }
    
     
     var notification = new Notification('消息通知',   // 这个是title  是必传的
     {      
         body: '该早起搬砖了哟~',
         icon: 'https://www.youxiniao.net/images/about.jpg',// "图标路径,若不指定默认为favicon"
         tag: "singleGod",   //标签   自己用来业务分别
         renotify: false,   //是否替换之前的通知项      会失效
    	 data:"不想啊工作了" // 预留的数据  当点击事件或其他事件触发是可以获取 做业务
     });
    
    
        notification.onclick = function(){
            this.close();     // 关闭当前 通知
            window.focus();    // 打开该通知所在的页面
            console.log(this.body);   //获取当前通知 带的数据
            open('http://baidu.com');  // 也可以打开对应的页面
    		             //直接写点击的处理方法即可 
          };
        //可直接打开通知notification相关联的tab窗口
    
    }
    catch(err){
        //在此处理错误
    }
    

    以上代码可以直接复制到 https 网站 在控制台运行,即可看到如下的效果 谷歌效果比较好
    在这里插入图片描述
    不过需要要先给浏览器通知你的权限,没有权限的话弹出如下
    在这里插入图片描述
    是否有权限的 和获取权限的方法 既是上面的代码 的 这部分代码

     if(Notification.permission != "granted" ){  //如果该网站的 还没有被授予 通知权限需要向客户索要
         Notification.requestPermission();   //向用户询问
     }
    
    展开全文
  • js实现浏览器通知 ##这种一直在轮询等到有通知的时候获取权限是否显示通知 在这里插入代码片 (function(window) { 'use strict'; function Notify() {}; window.Notify = Notify; //设置参数; var options = {...

    js实现浏览器通知

    ##这种一直在轮询等到有通知的时候获取权限是否显示通知

    在这里插入代码片
    (function(window) {
        'use strict';
        function Notify() {};
    
        window.Notify = Notify;
        //设置参数;
        var options = {
            noticeList: [], //通知存储数组
            notification: null, //通知对象
            title: '',
            body: '',
            data: {
                url: 'https://www.aigupiao.com/'
            },
            icon: 'img/logo.png',
            content: "通知...",
            time: 1000
        };
    
    
        Notify.showNotice = function(title, body, icon, data) {
            if (!("Notification" in window)) {
                alert("抱歉,您的浏览器不支持桌面通知");
            } else if (Notification.permission === "granted") {
                options.notification = new Notification(title ? title : options.title, {
                    body: body ? body : options.body,
                    icon: icon ? icon : options.icon,
                    // requireInteraction: true,
                    data: data
                });
                options.noticeList.push(options.notification);
    
            } else if (Notification.permission !== "denied") {
                Notification.requestPermission(function(permission) {
                    if (permission === "granted") {
                        options.notification = new Notification(title ? title : options.title, {
                            body: body ? body : options.body,
                            icon: icon ? icon : options.icon,
                            // requireInteraction: true,
                            data: data
                        });
                        options.noticeList.push(options.notification);
                    }
                });
            }
        };
    
    
        //单击通知
        Notify.clickNotice = function() {
            if (options.notification != null) {
                options.notification.onclick = function() {
                    window.open(options.notification.data.url, '_blank');
                };
            }
    
        };
    
        //清除通知
        Notify.clearNotice = function() {
            // options.notification.close();
            options.noticeList[options.noticeList.length - 1].close();
            options.noticeList.pop();
        };
    
        //清除所有通知
        Notify.clearAllNotice = function() {
            for (var i = 0; i < options.noticeList.length; i++) {
                options.noticeList[i].close();
            }
        };
    
        //自动关闭
        Notify.autoClose = function(time) {
            if (options.notification != null) {
                time == null ? setTimeout(options.notification.close.bind(options.notification), options.time) : setTimeout(options.notification.close.bind(options.notification), time);
            }
        };
    
    
        Notification.requestPermission(function(permission) {
            console.log(permission);
        });
    
        var inter = setInterval(function() {
            $.ajax({
                url: "你要轮询的url",
                dataType: "json",
                success: function(res) {
                    if(res.rslt === 'succ'){
                        var data = res.data
                        for (var i = data.length - 1; i >= 0; i--) {
                            (function(item){
                                Notify.showNotice(item.title, item.content, item.icon, item);
                                Notify.clickNotice()
                                Notify.autoClose(20000);
                            })(data[i])
                        }
                    }
    
                    // Notify.clearNotice();
                    // Notify.clearAllNotice();
    
                }
            });
        }, 6000);
    })(window);
    
    

    或者

    这种适合没有权限就不让轮询的情况(防止无用的轮询)。

    ;
    (function(window) {
        'use strict';
    
        var open_notify =  localStorage.getItem('notify_switch');
        console.log(open_notify)
        if(open_notify === 'true' || open_notify === null) {
            $('#notify_switch').removeClass('is_off').addClass('is_open');
        }
        if(open_notify === null) {
            localStorage.setItem('notify_switch','true');
        }
    
    
        function Notify() {};
    
        window.Notify = Notify;
        var inter = null;
        //设置参数;
        var options = {
            noticeList: [], //通知存储数组
            notification: null, //通知对象
            title: '',
            body: '',
            data: {
                url: 'https://www.aigupiao.com/'
            },
            icon: 'img/logo.png',
            content: "通知...",
            time: 1000
        };
    
    
        Notify.showNotice = function(title, body, icon, data) {
            if (!("Notification" in window)) {
                alert("抱歉,您的浏览器不支持桌面通知");
            } else if (Notification.permission === "granted") {
                options.notification = new Notification(title ? title : options.title, {
                    body: body ? body : options.body,
                    icon: icon ? icon : options.icon,
                    // requireInteraction: true,
                    data: data
                });
                options.noticeList.push(options.notification);
    
            } else if (Notification.permission !== "denied") {
    
                Notification.requestPermission(function(permission) {
                    if (permission === "granted") {
                        options.notification = new Notification(title ? title : options.title, {
                            body: body ? body : options.body,
                            icon: icon ? icon : options.icon,
                            // requireInteraction: true,
                            data: data
                        });
                        options.noticeList.push(options.notification);
                    }
                });
            }
        };
    
    
    
        //单击通知
        Notify.clickNotice = function() {
            if (options.notification != null) {
                options.notification.onclick = function() {
                    window.open(options.notification.data.url, '_blank');
                };
            }
    
        };
    
        //清除通知
        Notify.clearNotice = function() {
            // options.notification.close();
            options.noticeList[options.noticeList.length - 1].close();
            options.noticeList.pop();
        };
    
        //清除所有通知
        Notify.clearAllNotice = function() {
            for (var i = 0; i < options.noticeList.length; i++) {
                options.noticeList[i].close();
            }
        };
    
        //自动关闭
        Notify.autoClose = function(time) {
            if (options.notification != null) {
                time == null ? setTimeout(options.notification.close.bind(options.notification), options.time) : setTimeout(options.notification.close.bind(options.notification), time);
            }
        };
    
    
        //打开页面询问用户是否打开浏览器推送
        Notify.isNotice = function() {
            if (window.Notification) {
                // 支持
                console.log('yes');
            } else {
                console.log('no');
    
                // 不支持
            }
            console.log(Notification.permission);
            Notification.requestPermission(function(permission) {
                console.log(permission)
                if (permission === "granted") {
                    polling();
                    console.log(permission)
                    return;
                    //如果开启则开始轮询推送
                }else if(permission === "denied") {
                    console.log(permission)
                    //如果用户选择关闭则关闭轮询
                }
            });
        };
    
        function polling() {
            var open_notify_r =  localStorage.getItem('notify_switch');
            console.log(open_notify_r)
            if(open_notify_r != 'true') {
                console.log(open_notify_r)
                return;
            }
            inter = setInterval(function() {
                console.log(122121)
                $.ajax({
                    url: "轮询url",
                    dataType: "json",
                    success: function(res) {
                        if(res.rslt === 'succ'){
                            var data = res.data
                            for (var i = data.length - 1; i >= 0; i--) {
                                (function(item){
                                    Notify.showNotice(item.title, item.content, item.icon, item);
                                    Notify.clickNotice()
                                    Notify.autoClose(20000);
                                })(data[i])
                            }
                        }
    
                        // Notify.clearNotice();
                        // Notify.clearAllNotice();
    
                    }
                });
            }, 60000);
        }
    
        Notify.isNotice();
    
        $('#notify_switch').click(function() {
            if($(this).hasClass('is_open')) {
                $(this).removeClass('is_open').addClass('is_off');
                localStorage.setItem('notify_switch','false');
                clearInterval(inter);
            } else {
                $(this).removeClass('is_off').addClass('is_open');
                localStorage.setItem('notify_switch','true');
                clearInterval(inter);
                Notify.isNotice();
            }
        })
    })(window);
    
    
    一些注意注意事项

    1、一些内核下只支持https协议的页面获得推送权限。
    2、低版本的浏览器不支持此api
    3、有些浏览器(比如qq浏览器)默认会关闭所有网站获取通知的权利(在浏览器设置层面),这时js无能为力,只能是用户手动设置浏览器权限来达到获取通知的目的。

    展开全文
  • 1、Chrome要求必须https才可以开启浏览器通知 2、显示图片在本服务器,不支持跨越 3、自定义声音Chrome不播放,Firefox正常播放 代码如下: &lt;!-- /** * @Author: Ding Jianlong * @Date: 2018-08-02 10:...
  • MDN说明: 允许网页控制向最终...通俗易懂的说明: Notification API 是HTML5新增的桌面通知功能,开发者可以在浏览器关闭并且用户同意通知的前提下向桌面发送通知 =win10效果(本人win10系统):= 只要当前页面...
  • Notification 浏览器桌面通知...notification是通过向浏览器授权,向桌面推送通知的api,因为类似于一些重要消息,可能会被用户忽略,发起桌面通知更为明显,在这种业务场景下,我们就可以使用notification Notific...
  • WIN10 EDGE浏览器通知关闭

    千次阅读 2017-09-17 21:04:26
    WIN10 EDGE浏览器通知关闭
  • 最近项目上要用到浏览器桌面通知,之前虽然知道有这个东西,但是一直没有用过,借此机会了解下桌面通知的机制,在此分享下. 1.权限 首先需要明确的是,不是所有网页都可以发桌面通知的,不然不得烦死,那么就需要在发送...
  • 事件的type为"close" */ script> body> html> 各浏览器的支持不是很统一 https://www.caniuse.com/?search=Notification 文件直接打开没有效果,需要由后台服务提供页面 参考 Notification 浏览器消息推送
  • 近期在做公司后台管理系统,当有任务到来时,须要通知当事人,可是 当事人有可能在做别的,浏览器有可能会被最小化,这样就非常难看到通知了。...功能效果类似webQQ的消息提示通知。 项目...
  • js开启浏览器通知

    2020-04-27 10:58:09
    最近在写一个web端聊天系统,需求是要在浏览器最小化或者不在当前窗口的时候接收新消息会有浏览器通知,网上找了一下,找到了Notification API这个东西。 稍微研究了一下,这个东西的兼容性不是很高,一般是谷歌,...
  • js实现浏览器通知功能

    千次阅读 2019-06-25 14:27:21
    Notification API是浏览器通知接口,用于在用户的桌面(而不是网页上)显示通知信息,桌面电脑和手机都适用,比如通知用户收到了一封Email。具体的实现形式由浏览器自行部署,对于手机来说,一般显示在顶部的通知...
  • HTML5 Notification实现浏览器通知

    千次阅读 2018-12-11 19:39:53
    需求需要实现当浏览器最小化时,如果有新通知,实现浏览器闪烁,或者实在不行在浏览器标题栏闪烁(这个似乎相当于没有通知。。)。基于技术研究的目的,在网络上查找有没有相关实现方式,发现,大多不是真正的实现...
  • 浏览器消息推送 浏览器Notification Notification 是个构造函数,它上面有三个静态成员:maxActions、permission、requestPermission。 1. maxActions,这个属性值为2,表示支持的最大的actions数量。 2. ...
  • Notification 对象,存在于window上,可以生成一个通知对象以推送推送浏览器消息通知。 这玩意兼容性不咋地,实不实用看场景。对外用户的应用,自然是鸡肋功能,因为你无法知道用户使用的是哪家哪版本的浏览器;对...
  • 前言 socket.io: 包含对websocket的封装,可实现服务端和客户端之前的通信。详情见官网(虽然是英文文档,但还是通俗易懂...通过nodejs+Socket.io+Notification实现服务端往浏览器客户端发送自定义消息。若有问题可加...
  • 自己按照 Websocket 的 文档写的, 浏览器每次连接上, 一收到消息就断开了 报错:WebSocket connection to 'ws://192.168.1.248:2051/' failed: A server must not mask any frames that it sends to the client. ...
  • 前言前段时间接到一个需求,我们的web系统有电话接听功能。产品希望有电话呼入的时候,能够有效提示用户,无论用户是否在当前的系统页签上,甚至浏览器被最小化以后也能提醒用户。就着这个需求,我...
  • &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&...浏览器通知&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;scri

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 46,379
精华内容 18,551
关键字:

如何关闭浏览器消息通知