前端js实现桌面通知
来源:互联网 发布:php 检验 excel 编辑:程序博客网 时间:2024/05/18 14:43
前端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;//获取当前页面的urlwindow.close();//将当前页面关闭window.open(href);//新开一个页面,url为当前页面}navigator.onerror = function(){//当有错误发生时会onerror函数会被调用console.log('桌面通知发生了错误');}navigator.onshow = function(){//消息框显示时会被调用console.log('桌面通知显示ing');}});});</script></html>
阅读全文
0 0
- 前端js实现桌面通知
- js实现桌面通知
- window.Notification实现桌面通知
- 使用HTML5 Notification实现桌面通知
- js chrome 桌面通知(必须在服务器下)
- js实现浏览器通知功能
- js分页实现,前端实现。
- Html5 API之Notification对象实现桌面通知
- Web Notification简单实现桌面消息通知(右下角提示)
- Chrome的桌面通知
- HTML5 Notifications桌面通知
- 桌面弹出通知
- HTML5的桌面通知
- HTML5 桌面通知
- 桌面通知 【转载】
- [html5] (Notification) 桌面通知
- HTML5桌面通知
- 桌面通知-Notification
- android Audio OverView之一(framework)
- 检查oracle表和索引可回收空间!!
- 点击联系我们弹出临时QQ对话框
- c#基础接触(打卡)
- LTDC 学习
- 前端js实现桌面通知
- 3(2)、uboot根目录下的mkconfig.mk文件代码
- 大学生走出校园踏入社会需坚持的原则
- div垂直水平居中的五种方法
- 史上最全编程语言列表_你掌握了哪些?
- 【Lua】Mac系统下配置SublimeText的Lua编译环境
- 二叉树非递归遍历
- 异常 The content of the adapter has changed but ListView did not receive a notification可能的一种解决方法
- Vue.js系列之vue-resource