chromehtml代码提⽰框，如何调⽤chrome的桌⾯提⽰框
HTML5 Web Notification通知是属于桌⾯性质的通知，有点类似于显⽰器右下⾓蹦出的QQ弹框，杀毒提⽰之类的，跟浏览器是脱离的，消息是置顶的。
如果浏览器⽀持Web Notification，不考虑私有前缀，则window.Notification就会是⼀个有很多静态属性和实例⽅法的函数。基本
上，Web Notification所有的语法都是围绕Notification这个函数来进⾏的。
1. questPermission(callback)
2. Notification.permission[只读]
这是⼀个静态属性。表⽰是否允许通知，值就是下⾯的granted, denied, 或default.今年教师节是第几个
其中granted表⽰⽤户允许通知，denied表⽰⽤户嫌弃你，default表⽰⽤户⽬前还没有管你。
3. new Notification(title, options)
通过new构造，显⽰通知。其中title是必须参数，表⽰通知⼩框框的标题内容，options是可选参数，对象，⽀持的参数以及释义见下表：
属性名
释义
dir 默认值是auto, 可以是ltr或rtl，有点类似direction属性。表⽰提⽰主体内容的⽔平书写顺序。
lang 提⽰的语⾔。没看出来有什么⽤。⼤家可以忽略之~
body 提⽰主体内容。字符串。会在标题的下⾯显⽰。⽐⽅说上⾯的“好啊！(害羞.gif)”。
tag 字符串。标记当前通知的标签。
icon 字符串。通知⾯板左侧那个图标地址。
data 任意类型和通知相关联的数据。
vibrate 通知显⽰时候，设备震动硬件需要的振动模式。所谓振动模式，指的是⼀个描述交替时间的数组，分别表⽰振动和不振动的毫秒数，⼀直交替下去。例如[200, 100, 200]表⽰设备振动200毫秒，然后停⽌100毫秒，再振动200毫秒。
renotify 布尔值。新通知出现的时候是否替换之前的。如果设为true，则表⽰替换，表⽰当前标记的通知只会出现⼀个。注意都这⾥“当前标记”没？没错，true参数要想其作⽤，必须tag需要设置属性值。然后，通知就会像这样覆盖： ⽽不会是默认的叠⾼楼：
周艺轩silent 布尔值。通知出现的时候，是否要有声⾳。默认false, 表⽰⽆声。
天弘基金 余额宝sound 字符串。⾳频地址。表⽰通知出现要播放的声⾳资源。
noscreen 布尔值。是否不再屏幕上显⽰通知信息。默认false, 表⽰要在屏幕上显⽰通知内容。
sticky 布尔值。是否通知具有粘性，这样⽤户不太容易清除通知。默认false, 表⽰没有粘性。根据我⾃⼰的猜测，应该和position的sticky 属性值类似。
4. Notification.close()
通知显⽰了，如何关闭呢？可以通过调⽤Notification.close()实例⽅法，实际上，通知如果你放着不管，⼀段时间后就会⾃动隐藏，具体多久不详，我估摸着5秒有的。
5. 事件句柄 lick
点击通知，然后……
通知显⽰异常，然后。例如，明明Notification.permission是default，你还让我显⽰。
下⾯这些呢有必要独⽴出来，虽然现在是⽀持挺好的，但是，由于⽬前规范并没有把它们列⼊其中，所以，未来有可能浏览器就不⽀持了。
通知关闭了，然后…… ⽆论是⽤户⼿动关闭，还是直接Notification.close()关闭都会触发该该事件。
通知显⽰的时候，该⼲嘛⼲嘛~~
6. 其他属性值
除了Notification.permission外，Notification还有很多其他只读属性值，但是，基本上和上⾯的options参数⼀致，返回的值也是options和默认值的合并值(如果浏览器⽀持的话)。
Notification.title[只读]
Notification.dir[只读]
Notification.lang[只读]
Notification.body[只读]
Notification.tag[只读]
Notification.icon[只读]
Notification.data[只读]
Notification.silent[只读]
Notification.title[只读]
Notification.timestamp[只读]
通知创建或者可以使⽤的时间。
Notification.sound[只读]
Notification.sticky[只读]
Notification.vibrate[只读]
document.addEventListener('DOMContentLoaded',function(){if(!('Notification' inwindow) ){
alert('Sorry bro, your browser is not good enough to display notification');return;
}
姜逸磊questPermission(function(permission){varnotification= newNotification("桌⾯提醒",{
body:'桌⾯提醒这⾥是内容',
icon:'icon.jpg',
dir:'auto',
});
setTimeout(function() {
notification.close();//关闭桌⾯通知
},5000);
notification.οnclick= function(){//点击桌⾯通知，模拟实现把⽤户⼩化的窗⼝⼤化并刷新
notification.close();//关闭桌⾯通知
varhref=window.location.href;//获取当前页⾯的url
window.close();//将当前页⾯关闭
window.open(href);//新开⼀个页⾯，url为当前页⾯
}
navigator.οnerrοr= function(){//当有错误发⽣时会onerror函数会被调⽤
console.log('桌⾯通知发⽣了错误');
}
navigator.οnshοw= function(){//消息框显⽰时会被调⽤
console.log('桌⾯通知显⽰ing');
}
});
});
PDT版本升级提醒
var version = "<?php echo $version ?>";var releases = "<?php echo $releases ?>";//桌⾯提醒
functionnotify(title, content) {if(!title && !content){
title= "PDT新版本提醒";
content= "PDT有新的版本，请您更新!";
}var iconUrl =
程序定时关闭器"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAABGdBTUEAALGPC/xhBQAAACBjSFJ {//chrome⽼版本
if (window.webkitNotifications.checkPermission() == 0) {var notif =ateNotification(iconUrl,
title, content);
notif.display= function() {}
notif.οnerrοr= function() {}
notif.οnclick= function() {this.cancel();}
notif.show();
}else{
questPermission($jy.notify);
}
}else if("Notification" inwindow){//判断是否有权限
if (Notification.permission === "granted") {var notification = newNotification(title, {"icon": iconUrl,"body": content,"tag":"PDTNotice","renotify":true,
});
notification.οnclick= function(){
notification.close();var href = "iangnet/sunny5156/PDT/releases";
window.open(href);
}
}//如果没权限，则请求权限
else if (Notification.permission !== 'denied') {
//information
if (!('permission' inNotification)) {
Notification.permission=permission;
}//如果接受请求
四川美食排行榜if (permission === "granted") {var notification = newNotification(title, {"icon": iconUrl,"body": content,"tag":"PDTNotice","renotify":true,
});
notification.οnclick= function(){
notification.close();var href = "iangnet/sunny5156/PDT/releases";
window.open(href);
}
}
});
}
}
}if(place('.')) >= place('.')) ){
notify();
}
最后编辑：2017-09-05作者：sunny5156
喜欢技术....
发布评论