谷歌浏览器通知消息JS代码(Notification)

基本信息

源码名称：谷歌浏览器通知消息JS代码(Notification)

源码大小：3.97KB

文件格式：.html

开发语言：js

更新时间：2019-09-11

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　

源码介绍

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <title>谷歌浏览器通知消息JS代码</title>
 </head>
 <body>
  &nbsp; 
  <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>&nbsp; 
  <style>* {margin: 0; padding: 0;} body, html {width: 100%; height: 100%;}</style> 点击下面的《显示通知》按钮，谷歌浏览器会自动弹出是否当前域名允许通知消息对话框，点击允许，即可弹出通知对话框。 
  <button id="tip1" class="tip1">显示通知</button> 
  <script>
  $(function() {
    var timer = null,
    title = $('title').text(); $('#tip1').on('click',
    function() {
        showMsgNotification('这是通知标题-》', '这里是消息内容，非常不错的例子');
        return false;
    }); $('body').on('click',
    function() {
        clearInterval(timer);
        $('title').text(title);
    }); 
    function showMsgNotification(title, msg) {
        var Notification = window.Notification || window.mozNotification || window.webkitNotification; 
        if (Notification) { //支持桌面通知
            if (Notification.permission == "granted") {
                //已经允许通知                        
                var instance = new Notification(title, {
                    body: msg,
                    icon: "https://www.haolizi.net/skin/images/150x50_logo.png",
                }); instance.onclick = function() {
                    $('body').css({
                        'background': 'red'
                    });
                    console.log('onclick');
                    instance.close();
                };
                instance.onerror = function() {
                    console.log('onerror');
                };
                instance.onshow = function() {
                    console.log('onshow');
                };
                instance.onclose = function() {
                    console.log('onclose');
                };
            } else {
                //第一次询问或已经禁止通知(如果用户之前已经禁止显示通知，那么浏览器不会再次询问用户的意见，Notification.requestPermission()方法无效)                        
                Notification.requestPermission(function(status) {
                    if (status === "granted") {
                        //用户允许                                
                        var instance = new Notification(title, {
                            body: msg,
                            icon: "images/reload.png"
                        }); instance.onclick = function() {
                            // Something to do                                
                        };
                        instance.onerror = function() {
                            // Something to do
                        };
                        instance.onshow = function() {
                            // Something to do
                        };
                        instance.onclose = function() {
                            // Something to do 
                        };
                    } else {
                        //用户禁止
                        return false
                    }
                });
            }
        } else {
            //不支持(IE等)                    
            var index = 0; clearInterval(timer);
            timer = setInterval(function() {
                if (index % 2) {
                    $('title').text('【　　　】'   title);
                    //这里是中文全角空格，其他不行                        
                } else {
                    $('title').text('【新消息】'   title);
                }
                index  ; 
                if (index > 20) {
                    clearInterval(timer);
                }
            },
            500);
        } 
    } 
}); 
</script>  
 </body>
</html>