前端开发周边（基于前端js实现桌面弹窗）

快来打我* 2021-09-29 12:14 333阅读 0赞

前端js实现桌面通知

前端js实现桌面通知，思路是调用Notification对象，先检测用户是否授权桌面显示，若授权则进行显示，若不授权则不显示。

在Notification对象中常用的属性有title(桌面通知标题)、body(桌面通知的主体内容，注意不对html进行转义，只是字符串)、icon(桌面通知左边的logo)、dir(主体内容的水平书写顺序)。

Notification有onclick事件、onerror事件、onshow事件、close()事件。可以使用setInterval或者setTimeout定时器对桌面通知的消失事件进行操控，可在其他的事件中对桌面通知进行交互。

本次实现的是页面初始化的时候请求用户是否允许显示桌面通知，若允许则显示，若不允许则不显示。在显示桌面通知后，用户可手动关闭，若用户不关闭，则5秒钟之后自行关闭，当用户点击桌面通知时实现打开当前页面并刷新。

可以直接运行的代码

<!DOCTYPE html>  
    <html>  
        <head>  
            <meta charset="UTF-8">  
            <title></title>  
        </head>  
        <body>  
            测试桌面通知，窗口小化效果更好。  
        </body>  
        <script type="text/javascript">  
        document.addEventListener('DOMContentLoaded',function(){  
            if(! ('Notification' in window) ){  
            alert('Sorry bro, your browser is not good enough to display notification');  
            return;  
            }     
            Notification.requestPermission(function(permission){  
                var notification = new Notification("Here I am!",{body:'Thanks for clicking that button. Hope you liked.',icon:'',dir:'auto'});  
                setTimeout(function() {  
                    notification.close();//关闭桌面通知  
                }, 5000);  
                notification.onclick = function(){  
                    //点击桌面通知，模拟实现把用户小化的窗口大化并刷新  
                    notification.close();//关闭桌面通知  
                    var href = window.location.href;//获取当前页面的url  
                    window.close();//将当前页面关闭  
                    window.open(href);//新开一个页面，url为当前页面  
                }  
                navigator.onerror = function(){  
                    //当有错误发生时会onerror函数会被调用  
                    console.log('桌面通知发生了错误');  
                }  
                navigator.onshow = function(){  
                    //消息框显示时会被调用  
                    console.log('桌面通知显示ing');  
                }  
            });  
        });  
        </script>  
    </html>

转载于:https://www.cnblogs.com/L5251/articles/8879525.html