HTML5中的Web Notification桌面通知
大家在做一些浏览器端的聊天功能的时候,或者在一些网站跟在线客服咨询的时候,会看到一些消息通知的提示,常见的有浏览器标签页的闪烁和屏幕右侧的消息通知。本篇博客就在这里简单的介绍一下如何实现这样的功能。
1、实现标签页闪烁效果
实现的效果:
当前窗体失焦的时候,标题开始闪动,当前窗体获取焦点的时候,则停止闪动。
注意:这里需要用到窗口的获取焦点和失去焦点的方法,由于IE和其他Chrome及FireFox的区别,这里需要用到的方法就不一样,具体是:
Chrome和FireFox浏览器是window的onfocus, onblur方法;而IE浏览器则是document的onfocusin, onfocusout方法
下面是代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签页标题闪烁</title>
</head>
<body>
<h2>浏览器窗体获得焦点则停止标题闪烁通知+失去焦点则开启标题闪烁通知</h2>
<script>
// 窗体失焦的时候,标题就会闪。
// 这里有一个小的知识点,就是浏览器窗体获得焦点和失去焦点,Chrome和FireFox浏览器是window的onfocus, onblur方法;而IE浏览器则是document的onfocusin, onfocusout方法,因此有:
var titleInit = document.title, isShine = true;
setInterval(function() {
var title = document.title;
if (isShine == true) {
if (/新/.test(title) == false) {
document.title = '【你有新消息】';
} else {
document.title = '【 】';
}
} else {
document.title = titleInit;
}
}, 500);
// for Chrome and FireFox
window.onfocus = function() {
console.log(123);
isShine = false;
};
window.onblur = function() {
isShine = true;
};
// for IE
document.onfocusin = function() {
isShine = false;
};
document.onfocusout = function() {
isShine = true;
};
</script>
</body>
</html>
在浏览器打开该页面,再随意打开其他一个标签页,测试效果如下:
2、实现屏幕右侧消息通知
先直接贴出代码吧
test2.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>测试消息通知</h2>
<script>
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)
}
</script>
</body>
</html>
Notification.requestPermission这是一个静态方法,作用就是让浏览器出现是否允许通知的提示,在mac下,如图所示:
点击了允许后,则当前域名的网站就被允许在该电脑上出现通知弹框,以谷歌浏览器为例,这时依次点击:设置——高级——内容设置——通知,就可以在允许下面看到刚才点击了允许通知的站点的地址,如图:
此时,localhost:63342站点就可以出现通知消息了(消息通知弹窗在Mac和windows两个系统下可能出现的位置有些不一样,自己设置的logo出现的位置也会有些不同),Mac的消息通知窗口是从屏幕右上角出来的(Windows应该是从右下角出来),效果如图:
此时,只要当前页面没有关闭,不管你当前浏览的是其他页面还是其他应用,有消息通知时,屏幕右侧都会出现消息通知的弹框,点击消息提示框,这会跳转到消息页面。
注意:如果用的是Chrome浏览器的新版本,则必须是https协议,消息通知方可有效(当然如果是自己做测试,在本机用本地ip,则无所谓http还是https),chrome的旧版本则没有这一限制(具体到哪个版本为界限,就不清楚)
本篇博客也只是简单的记录一下如何实现这样的消息通知效果,想了解更详细的知识点,可以参考张鑫旭大神的博客:
http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 03 . Nginx日志配置及日志切割
- 04 . Nginx的Rewrite重写
- 05 . Nginx的反向代理与负载均衡
- 06 . Nginx静态资源缓存
- 07 . Nginx常用模块及案例
- 08 . Nginx状态码
- 09 . Nginx配置LNMP和LNMT架构
- 01 . Mysql简介及部署
- jquery点击按钮,添加一行input输入框
- 02 . Mysql基础操作及增删改查
- 03 . MysSQL权限和备份
- 04 . Mysql主从复制和Mycat读写分离
- 02 . Python之数据类型
- 05 . k8s实战之部署PHP/JAVA网站
- 拖不得了,Android11真的来了,最全适配实践指南奉上