H5 Notification 桌面通知

最新推荐文章于 2022-06-23 15:55:09 发布

gg有何不可

最新推荐文章于 2022-06-23 15:55:09 发布

阅读量288

点赞数

文章标签： javascript html5 css

本文链接：https://blog.csdn.net/gzhang1018/article/details/105650189

版权

window.onload = function () {
suportNotify()
}

//判断浏览器是否支持Web Notifications API
function suportNotify(){
    if (window.Notification) {
        // 支持
        console.log("支持"+"Web Notifications API");
        //如果支持Web Notifications API，再判断浏览器是否支持弹出实例
        showMess()
    } else {
        // 不支持
        alert("不支持 Web Notifications API");
    }
}

//判断浏览器是否支持弹出实例
function showMess(){
    setTimeout(function () {
        console.log('1：'+Notification.permission);
        //如果支持window.Notification 并且 许可不是拒绝状态
        if(window.Notification && Notification.permission !== "denied") {
            //Notification.requestPermission这是一个静态方法，作用就是让浏览器出现是否允许通知的提示
            Notification.requestPermission(function(status) {
                console.log('2: '+status);
                //如果状态是同意
                if (status === "granted") {
                    var m = new Notification('收到信息', {
                        body: '这里是通知内容！你想看什么客官？',　　//消息体内容
                        icon:"images/img1.jpg"　　//消息图片
                    });
                    m.onclick = function () {//点击当前消息提示框后，跳转到当前页面
                        window.focus();
                    }
                } else{
                    alert('当前浏览器不支持弹出消息')
                }
            });
        }
    },1000)
}