javascript-浏览器消息提醒
如何让用户在浏览器最小化的状态下也能及时的收到消息提醒呢? 这个问题作为webRd是要正面面对的. 大约可分两种场景:一种是类似桌面通知的形式还有一种是类似QQ提醒(在系统任务栏闪烁随后高亮);接下来分别研究下:
桌面提醒:
这个H5有个强大的API没错就是Notification, 没听过? https://developer.mozilla.org/en-US/docs/Web/API/notification 先去了解下,很详细;浏览器不同对其支持程度也不同,简单讲就是有兼容问题,而笔者要说的就是基于Notification的一款小类库 https://github.com/ttsvetko/HTML5-Desktop-Notifications,其支持:IE9+、Safari6、Firefox、Chrome;好吧都是前辈的结晶,我就是个搬砖的,下面附一个简单的小demo:
ps: 么有用类库, 就是练手用的..实际还是用类库吧;
function _Notification(title,option){
var Notification = window.Notification || window.mozNotification || window.webkitNotification;
Notification.permission === "granted"?creatNotification(title, option):requestPermission(title, option);
function creatNotification(title, option){
var instance = new Notification(title, option);
instance.onclick = function () {
console.log('onclick');
};
instance.onerror = function () {
console.log('onerror');
};
instance.onshow = function () {
console.log('onshow');
};
instance.onclose = function () {
console.log("close")
}
}
function requestPermission(title, option){
Notification.requestPermission(function(status) {
status === "granted"?creatNotification(title, option):failNotification(title);
});
}
function failNotification(title){
var timer;
return function(timer){
var index = 0;
clearInterval(timer);
timer = setInterval(function() {
if(index%2) {
document.head.getElementsByTagName("title")[0].innerHTML = '【 】'+ title;
}else {
document.head.getElementsByTagName("title")[0].innerHTML = '【新消息】'+ title;
}
index++;
if(index > 20) {
clearInterval(timer);
}
}, 500);
}(timer);
}
}
任务栏提醒:
这个还真是个问题; 至于解决的终极方法目前笔者还没研究明白;不过window.open 这种弹窗会触发闪烁提醒, 但需要解决用户禁止弹窗的情况,可以模拟from提交 || 超链接(a) || 利用浏览器冒泡;这几种方法都可以解决大部分被拦截的情况; 可这都不是笔者想要的;因为提示内容展示在弹窗中总是不好的,用户很容易蒙圈,怎么一有提示就多个标题栏呢...很烦,貌似内存溢出也可以,不过这个就算了,除非脑子进水了...; 期待大神指点..;
javascript-浏览器消息提醒的更多相关文章
- jquery 消息提醒插件 toastmessage
最近做系统,想到使用后台要使用消息提醒,但是一直苦恼消息提醒的效果,于是找了一个toastmessage,还不错.记录下使用的方法. 第一步:引入需要的文件 <script type=" ...
- [Asp.net 开发系列之SignalR篇]专题六:使用SignalR实现消息提醒
一.引言 前面一篇文章我介绍了如何使用SignalR实现图片的传输,然后对于即时通讯应用来说,消息提醒是必不可少的.现在很多网站的都有新消息的提醒功能.自然对于SignalR系列也少不了这个功能的实现 ...
- python 全栈开发,Day130(多玩具端的遥控功能, 简单的双向聊天,聊天记录存放数据库,消息提醒,玩具主动发起消息,玩具主动发起点播)
先下载github代码,下面的操作,都是基于这个版本来的! https://github.com/987334176/Intelligent_toy/archive/v1.3.zip 注意:由于涉及到 ...
- PHP实现RTX发送消息提醒
RTX是腾讯公司推出的企业级即时通信平台,大多数公司都在使用它,但是我们很多时候需要将自己系统或者产品的一些通知实时推送给RTX,这就需要用到RTX的服务端SDK,建议先去看看RTX的SDK开发文档( ...
- 使用SignalR实现消息提醒
Asp.net SignalR是微软为实现实时通信的一个类库.一般情况下,SignalR会使用JavaScript的长轮询(long polling)的方式来实现客户端和服务器通信,随着Html5中W ...
- 第一百一十二节,JavaScript浏览器检测
JavaScript浏览器检测 学习要点: 1.navigator对象 2.客户端检测 由于每个浏览器都具有自己独到的扩展,所以在开发阶段来判断浏览器是一个非常重要的步骤.虽然浏览器开发商在公共接口方 ...
- jQuery Growl插件(消息提醒)
ps:菜鸟教程 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <s ...
- Laravel-admin 消息提醒、播放音频、点击跳转
jquery-toastr 消息提醒.播放音频.点击跳转 应用情景,有新的订单生成,后台进行消息提醒并播放音频(这里用到轮询简单实现):下面附代码 1.找到laravel-admin 中的 index ...
- Socket.io+Notification实现浏览器消息推送
前言 socket.io: 包含对websocket的封装,可实现服务端和客户端之前的通信.详情见官网(虽然是英文文档,但还是通俗易懂).Notification: Html5新特性,用于浏览器的桌面 ...
随机推荐
- GIL计算python 2 和 python 3 计算密集型
首先我画了一张图来表示GIL运行的方式: Python 3执行如下计算代码:#-*-conding:utf-8-*-import threading import timedef add(): n = ...
- CentOS7(64)环境使用rpm命令安装gcc
第一步:下载gcc相关的安装文件下载地址:http://vault.centos.org/7.0.1406/os/x86_64/Packages/ 下载以下文件: cpp-4.8.2-16.el7.x ...
- 第二篇*1、Python基本数据类型
数据类型: 变量可以处理不同类型的值,基本的类型是数和字符串.使用变量时只需要给它们赋一个值.不需要声明或定义数据类型.Python3 中有六个标准的数据类型:Number(数字),String(字符 ...
- EF 6.x实现dynamic动态查询
利用SqlQuery实现动态查询 public static IEnumerable<dynamic> SqlQueryDynamic(this DbContext db, string ...
- [译]与TensorFlow的第一次接触(三)之聚类
转自 [译]与TensorFlow的第一次接触(三)之聚类 2016.08.09 16:58* 字数 4316 阅读 7916评论 5喜欢 18 前一章节中介绍的线性回归是一种监督学习算法,我们使用数 ...
- HTML DOM学习
本文档参考菜鸟教程:http://www.runoob.com/htmldom/htmldom-tutorial.html 前提: DOM Document Object Model(文档对象模型) ...
- 十三 re模块
一:什么是正则? 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法.或者说:正则就是用来描述一类事物的规则.(在Python中)它内嵌在Python中,并通过 r ...
- 转:Loadrunner添加服务器监控
一.监控windows系统:1.监视连接前的准备 1)进入被监视windows系统,开启以下二个服务Remote Procedure Call(RPC) 和Remote Registry ...
- TZOJ 2099 Sightseeing tour(网络流判混合图欧拉回路)
描述 The city executive board in Lund wants to construct a sightseeing tour by bus in Lund, so that to ...
- [Java核心技术笔记]并发
Runnable Runnable接口是函数式接口 //Runnable接口 public interface Runnable { void run(); } //用lambda表达式创建实例 Ru ...