最近更新
阅读排行
关注本站
iNotify.js点击消息框当前页面跳转
阅读：6469 次 编辑日期：2017-3-20
目录：
概述：
如何能调用浏览器的弹窗消息提醒？如何点击消息框进入对应页面？这就要用到浏览器消息通知库iNotify.js，今天我们来说说~
iNotify.js：
JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome、Firefox、Safari等系统通知。
下载：
$ npm install title-notify --save-dev
$ bower install inotify --save-dev
当然，如果想省事儿，可以点此下载。
如何使用：
var iN = new iNotify({
effect: 'flash',
interval: 500,
message:"有消息拉！",
audio:{
file: ['msg.mp4','msg.mp3','msg.wav']
},
notification:{
title:"标题内容！",
body:'欢迎来到UW3C技术分享~'
}
});
function inotifyTest(){
iN.setFavicon(10).setTitle('新标题').notify({
title:"新通知",
body:"欢迎来到UW3C技术分享~"
})
}
注意，如果想要在inotifyTest中修改哪些参数，在实例化方法的时候必须也要实例化。例如，修改body，在new iNotify中就要事先声明。
如何点击消息新面打开：
跳转分两种，一种是在新页面打开，需要使用openurl参数。相当于a标签的target="_blank"
var iN = new iNotify({
effect: 'flash',
interval: 500,
message:"有消息拉！",
openurl:"http://www.uw3c.com", // 点击弹窗打开连接地址
notification:{
title:"标题内容！",
body:'欢迎来到UW3C技术分享~'
}
});
function inotifyTest(){
iN.setFavicon(10).setTitle('新标题').notify({
title:"新通知",
body:"欢迎来到UW3C技术分享~",
openurl:"http://www.uw3c.com" // 点击弹窗打开连接地址
})
}
如何点击消息框在当前页面跳转页面：
在当前页面跳转就需要用到另一个参数onclick，相当于a标签不加target="_blank"
var iN = new iNotify({
effect: 'flash',
interval: 500,
message:"有消息拉！",
onclick:function(){ //点击事件
console.log("欢迎")
},
notification:{
title:"标题内容！",
body:'欢迎来到UW3C技术分享~'
}
});
function inotifyTest(){
iN.setFavicon(10).setTitle('新标题').notify({
title:"新通知",
body:"欢迎来到UW3C技术分享~",
onclick:function(){ //点击事件
window.location.href = "http://www.uw3c.com";
}
})
}
