04/22
2016
当你在浏览某些网页时,可能会看到浏览器左上角显示了一个选项(以chrome为例),询问你是否允许此网页显示通知:
如果允许了,该网页可以在浏览器右下角显示通知,外观大致如下:
这是使用HTML5的Notification API发送的提醒,它是简便并易于使用的。如果我们要在网页上这么做,我们需要向用户请求授权,并创建一个消息。示例如下:
if(Notification && Notification.permission !== "granted"){ //如果未授权 //向用户请求授权 Notification.requestPermission(function(status){ if(Notification.permission !== status){ Notification.permission = status; } }); } //定时检测是否允许了授权 var noteT=setInterval(function(){ if(Notification && Notification.permission === "granted"){ //如果已经授权 creatNote (); clearInterval(noteT); } },500); function creatNote () { //创建一个提醒 var newNote=new Notification("saber酱的抱枕",{ //定义标题和选项 lang: "utf-8", icon:"/f/head10.png", //图片尺寸大于一定数字才会铺满左侧icon区域 tag:"saber", body:"试问,你就是我的master吗?" //消息的主体 }); //为提醒添加事件 newNote.onclose=function(){ alert("555,不要关掉我嘛"); } }
至此一个简单的示例就完成了。测试时需要在web环境中测试,在本地路径这是无效的。
我们还可以向通知添加事件,以检测用户的操作。Notification对象有四个事件,分别是onshow()、onclick()、onclose()、onerror()。注意,如果消息显示后你放任不管,过一段时间浏览器会自动关闭它,那时将会自动触发onclose事件。firefox浏览器会很快的自动关闭通知,chrome浏览器则会让通知显示的更久一些。
使用HTML5 Notification API发送桌面提醒
-
Google Chrome 60GNU/Linux x64 -
Google Chrome 54Windows 7 好文,你的站也很漂亮。受教了
-
Google Chrome 45Windows 进来学习一下
-
Google Chrome 50Windows 7 请问,我是你的master吗?
在实际使用中,往往用户只希望收到一次请求,当他关闭请求后,就不要再显示了,尤其是在博客中,如果每点击一次博文的题目,都会收到一个提醒,有点烦,所以我把你的代码优化了,望笑纳
<!-- 添加提醒 -->
if (localStorage.pagecount != "has been shown")
//只有用户第一次看到提醒时才显示
{
localStorage.pagecount = Number(localStorage.pagecount) + 1;
// 添加桌面提醒
if (Notification && Notification.permission !== "granted") { //如果未授权
//向用户请求授权
Notification.requestPermission(function(status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
});
}
//定时检测是否允许了授权
var noteT = setInterval(function() {
if (Notification && Notification.permission === "granted") { //如果已经授权
creatNote();
clearInterval(noteT);
}
}, 500);
function creatNote() {
var t = new Date().toLocaleString();
//创建一个提醒
var newNote = new Notification("steven's blog\n" + t, { //定义标题和选项
lang: "utf-8",
icon: "http://wuguowei18508.com/Lychee/uploads/big/18770ea8d1879e9f4bdf332635685a56.png", //图片尺寸大于一定数字才会铺满左侧icon区域
tag: "steven",
body: "圣诞节期间,本站会添加新的特效哦" //消息的主体
});
//当窗口被关闭后,不再显示
newNote.onclose = function() {
localStorage.pagecount = "has been shown";
}
}
}