Javascript快速实现浏览器系统通知


Posted in Javascript onAugust 26, 2017

JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome、Firefox、Safari等系统通知。

Javascript快速实现浏览器系统通知

下载

$ npm install title-notify --save-dev
$ bower install inotify --save-dev

编译

# 下载依赖工具
$ npm install 
# 压缩inotify
$ npm build
init
effect: flash | scroll | favicon
var iNotify = new iNotify().init()
//推荐下面写法
var iNotify = new iNotify({
 message: '有消息了。',//标题
 effect: 'flash', // flash | scroll 闪烁还是滚动
 openurl:"http://www.bing.com", // 点击弹窗打开连接地址
 onclick:function(){ //点击弹出的窗之行事件
  console.log("---")
 },
 //可选播放声音
 audio:{
  //可以使用数组传多种格式的声音文件
  file: ['msg.mp4','msg.mp3','msg.wav']
  //下面也是可以的哦
  //file: 'msg.mp4'
 },
 //标题闪烁,或者滚动速度
 interval: 1000,
 //可选,默认绿底白字的 Favicon
 updateFavicon:{
  // favicon 字体颜色
  textColor: "#fff",
  //背景颜色,设置背景颜色透明,将值设置为“transparent”
  backgroundColor: "#2F9A00" 
 },
 //可选chrome浏览器通知,默认不填写就是下面的内容
 notification:{
  title:"通知!",//设置标题
  icon:"",//设置图标 icon 默认为 Favicon
  body:'您来了一条新消息'//设置消息内容
 }
})

isPermission

判断浏览器弹框通知是否被阻止。

iNotify.isPermission()

声音设置

player

播放声音

iNotify.player()
loopPlay

自动播放声音

iNotify.loopPlay()
stopPlay

停止播放声音

iNotify.stopPlay()
setURL

设置播放声音URL

iNotify.setURL('msg.mp3')// 设置一个
iNotify.setURL(['msg.mp3','msg.ogg','msg.mp4']) // 设置多个

title通知

最新的版本默认不播放标题闪烁动画,初始化之后需要调用 setTitle(true) 方法才播放标题动画。

setTitle

设置标题,

iNotify.setTitle(true)//播放动画
iNotify.setTitle('新标题')//闪烁新标题
iNotify.setTitle()//清除闪烁 显示原来的标题
setInterval

 设置时间间隔

iNotify.setInterval(2000)
addTimer

添加计数器

iNotify.addTimer()
clearTimer

清除计数器

iNotify.clearTimer()

favicon通知

setFavicon

设置icon 显示数字

iNotify.setFavicon(10)
faviconClear

清除数字显示原来的icon

iNotify.faviconClear()

chrome通知

notify

弹出chrome通知,不传参数为预设值...

iNotify.notify(); 
iNotify.notify({
 title:"新通知",
 body:"打雷啦,下雨啦...",
 openurl:"http://www.bing.com",
 onclick:function(){
  console.log("---")
 }
});

其它

iNotify.init().title; 获取标题

例子

new iNotify({
 effect: 'flash',
 interval: 500
})

上面的例子跟下面的是一样的

new iNotify().init({
 effect: 'flash',
 interval: 500
});

实例一

function iconNotify(num){
 if(!notify) {
  var notify = new iNotify().init({
   effect: 'flash',
   interval: 500
  });
 }
 if(num===0){
  notify.faviconClear()
  notify.setTitle();
 }else if(num<100){
  notify.setFavicon(num)
  notify.setTitle("有新消息!");
 }else if(num>99){
  notify.setFavicon('..')
  notify.setTitle("有新消息!");
 }
}

实例二

var notify = new iNotify().init({
 effect: 'flash',
 interval: 500
});
notify.setFavicon("1")

实例三

var iN = new iNotify().init({
 effect: 'flash',
 interval: 500,
 message:"有消息拉!",
 updateFavicon:{//可选,默认绿底白字
  textColor: "#fff",// favicon 字体颜色
  backgroundColor: "#2F9A00" //背景颜色
 }
}).setFavicon(10);

实例四

var iN = new iNotify().init().setFavicon(5);

实例五

var iN = new iNotify().init({
 effect: 'flash',
 interval: 500,
 message:"有消息拉!",
 audio:{
  file: 'msg.mp4'
 }
}).setFavicon(10).player();

实例五

var iN = new iNotify().init({
 effect: 'flash',
 interval: 500,
 message:"有消息拉!",
 audio:{
  file: 'msg.mp4'//可以使用数组传多种格式的声音文件
 },
 notification:{
  title:"通知!",
  icon:"",
  body:'您来了一条新消息'
 }
}).setFavicon(10).player();
//弹出chrome通知,不传参数为预设值...
iN.notify(); 
iN.notify({
 title:"新通知",
 body:"打雷啦,下雨啦..."
});

实例六

var iN = new iNotify({
 effect: 'flash',
 interval: 500,
 message:"有消息拉!",
 audio:{
  file: ['msg.mp4','msg.mp3','msg.wav']
 },
 notification:{
  title:"通知!",
  body:'您来了一条新消息'
 }
})
iN.setFavicon(10).player();
var n = new iNotify()
n.init({
 effect: 'flash',
 interval: 500,
 message:"有消息拉!",
 audio:{
  file: ['openSub.mp4','openSub.mp3','openSub.wav']
 },
 notification:{
  title:"通知!",
  icon:"",
  body:'您来了一个客户'
 }
})
n.setFavicon(10).player();

总结

以上所述是小编给大家介绍的Javascript快速实现浏览器系统通知,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript学习笔记5 类和对象
Jan 11 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 Javascript
vue 通过base64实现图片下载功能
Dec 19 Vue.js
深入浅出es6模板字符串
Aug 26 #Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 #Javascript
详解Angular4 路由设置相关
Aug 26 #Javascript
浅谈Angular路由守卫
Aug 26 #Javascript
javascript实现文字无缝滚动效果
Aug 26 #Javascript
node实现定时发送邮件的示例代码
Aug 26 #Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 #jQuery
You might like
坏狼的PHP学习教程之第2天
2008/06/15 PHP
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
简单了解常用的JavaScript 库
2020/07/16 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
python操作ie登陆土豆网的方法
2015/05/09 Python
python文件操作之目录遍历实例分析
2015/05/20 Python
python开发游戏的前期准备
2019/05/05 Python
python进程和线程用法知识点总结
2019/05/28 Python
python中metaclass原理与用法详解
2019/06/25 Python
猫咪家具:CatsPlay
2018/11/03 全球购物
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
为什么要有struct关键字
2012/05/08 面试题
2014年辅导员工作总结
2014/11/18 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis