js实现通知弹屏 Notification

样式

实现代码

let notification;
// 可能的值包括：denied (用户拒绝了通知的显示), granted (用户允许了通知的显示), 或 default (因为不知道用户的选择，所以浏览器的行为与 denied 时相同).
if (window.Notification && Notification.permission === 'granted') {notification = new Notification('您有一条新的来电', {dir: 'rtl', //dir : 文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左）body: `程序员正在等待服务`//body: 通知中额外显示的字符串// icon: img  一个图片的URL，将被用于显示通知的图标。// tag: 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。});
} else if (Notification.permission !== 'denied') {Notification.requestPermission().then(function(permission) {// 如果用户接受权限，我们就可以发起一条消息if (permission === 'granted') {notification = new Notification('您有一条新的来电', {dir: 'rtl',body: `程序员正在等待服务`// icon: img});}});
}
if (notification) {notification.onclick = () => {window.focus();// 点击之后触发方法};
}

注意

弹屏只能在我们本地 localhost 看到或者是https中的网站中才会有

参考官方文档

js实现通知弹屏 Notification相关推荐

【WPF】右下角弹出自定义通知样式（Notification）——简单教程
[WPF]右下角弹出自定义通知样式(Notification)--简单教程原文:[WPF]右下角弹出自定义通知样式(Notification)--简单教程 1.先看效果 2.实现 1.主界面是Mai ...
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操 ...
键空间通知（keyspace notification）
Redis键空间通知(keyspace notification) 本文档翻译自: http://redis.io/topics/notifications . 键空间通知功能目前仍在开发中,这个文档 ...
Winlogon通知包(Winlogon Notification Package)
用Winlogon Notification Package //想捕捉WinXP用户注销,切换用户的事件,用WTSRegisterSessionNotification这个函数,原形: ...
android 通知锁屏,NotificationCompat 的使用（锁屏通知栏显示）
网上关于这个的使用有很多,我就不做那么多的介绍了,说说5.0以后的锁屏通知栏显示和页面的悬浮通知显示.NotificationCompat的使用示例代码: NotificationCompat.Bui ...
iOS实现本地通知（local notification）的方法
iOS 的本地通知(local notification)用于基于时间行为的通知,比如有关日历或者 todo 列表的小应用.另外应用如果在后台执行,iOS 允许它在受限的时间内运行,它也会发现本地通 ...
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
实现了一下功能: 1.title可自定义可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出框里的html 5.确定取消按钮可选调用方法: 1 P ...
Hammer.js移动端触屏框架的使用
hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...
PP视频播放视频时如何关闭弹屏
本文小编给大家带来的是PP视频相关的内容.PP视频播放器官方下载电脑版始终以"用户体验"为生命,您可运行PP视频播放器,在线享受奇艺网站内全部免费高清正版视频.不管是哪个视频播放器 ...
vue 进入首页只弹一个弹框_vue.js实现只弹一次弹框
核心代码是 getCookie()部分,控制弹框的显示隐藏则在 created()中. Lorem ipsum dolor sit amet, consectetur adipisicing elit ...

js实现通知弹屏 Notification

样式

实现代码

注意

js实现通知弹屏 Notification相关推荐

最新文章

热门文章