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

时间：2024-03-06 08:02:55
前端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>

 

相关文章