html5 桌面上提示:Notifycations运用详细介绍

日期:2020-09-17 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

HTML5中的桌面上提示(web notifications)能够在当今网页页面对话框弹出1个信息框,这个信息框是跨 Tab 对话框的,这在客户开启好几个 tab 访问网页页面时,提示较为便捷,非常容易让客户看到。现阶段要是是 webkit 核心适用该作用。
该作用在 chrome 下必须以 http 方法开启网页页面才可以开启。
桌面上提示作用由 window.webkitNotifications 目标完成(webkit核心)。
window.webkitNotifications 目标沒有特性,有4个方式:
1.requestPermission()
  该方式用于向客户申请办理信息提示管理权限,假如当今沒有对外开放该管理权限,访问器将弹出受权页面,客户受权后,在目标內部造成1个情况值(1个0、1或 2 的整数金额):
0:表明客户愿意信息提示,只在该情况下可使用信息内容提示作用;
1:表明默认设置情况,客户既未回绝,也未愿意;
2:表明客户回绝信息提示。
2.checkPermission()
  这个方式用于获得 requestPermission() 申请办理到的管理权限的情况值。
3.createNotification()
  这个方式以纯信息的方法建立提示信息,它接纳3个标识符串主要参数:
iconURL:在信息中显示信息的标志详细地址,
title:信息的题目,
body:信息行为主体文字內容
该方式会回到1个 Notification目标,能够对于这个目标做更多的设定。
Notification 目标的特性与方式:

拷贝编码
编码以下:

dir: ""
onclick: null
onclose: null
ondisplay: function (event) {
onerror: null
onshow: null
replaceId: ""
tag: ""
__proto__: Notification
addEventListener: function addEventListener() { [native code] }
cancel: function cancel() { [native code] }
close: function close() { [native code] }
constructor: function Notification() { [native code] }
dispatchEvent: function dispatchEvent() { [native code] }
removeEventListener: function removeEventListener() { [native code] }
show: function show() { [native code] }
__proto__: Object

dir:设定信息的排序方位,可赋值为“auto”(全自动), “ltr”(left to right), “rtl”(right to left)。
  tag:为信息加上标识名。假如设定此特性,当有新信息提示时,标识同样的信息只显示信息在同1个信息框,后1个信息框会更换先前1个,不然出現好几个信息提醒框,可是数最多值显示信息3个信息框,超出3个,后继信息通告会被堵塞。
  onshow:当信息框显示信息的情况下开启该恶性事件;
  onclick: 当点一下信息框的情况下开启该恶性事件;
  onclose:当信息关掉的情况下开启该恶性事件;
  onerror:当出現不正确的情况下开启该恶性事件;
方式:
  addEventListener && removeEventListener:基本的加上和移除恶性事件方式;
  show:显示信息信息提示框;
  close:关掉信息提示框;
  cancel:关掉信息提示框,和 close1样;
4.createHTMLNotification()
  该方式与 createNotification() 不一样的是,他以HTML方法建立信息,接纳1个主要参数: HTML 文档的URL,该方式一样回到 Notification目标。
1个案例:

拷贝编码
编码以下:

<!DOCTYPE HTML>
<html>
<head>
<title>notifications in HTML5</title>
</head>
<body>
<form>
<input id="trynotification" type="button" value="Send notification" />
</form>
<script type="text/javascript">
document.getElementById("trynotification").onclick = function(){
notify(Math.random());
};
function notify(tab) {
if (!window.webkitNotifications) {
return false;
}
var permission = window.webkitNotifications.checkPermission();
if(permission!=0){
window.webkitNotifications.requestPermission();
var requestTime = new Date();
var waitTime = 5000;
var checkPerMiniSec = 100;
setTimeout(function(){
permission = window.webkitNotifications.checkPermission();
if(permission==0){
createNotification(tab);
}else if(new Date()-requestTime<waitTime){
setTimeout(arguments.callee,checkPerMiniSec);
}
},checkPerMiniSec);
}else if(permission==0){
createNotification(tab);
}
}
function createNotification(tab){
var showSec = 10000;
var icon = "http://tech.baidu.com/resource/img/logo_news_137_46.png";
var title = "[" + new Date().toLocaleTimeString() + "] close after " + (showSec/1000) + " seconds";
var body = "hello world, i am webkitNotifications informations";
var popup = window.webkitNotifications.createNotification(icon, title, body);
popup.tag = tab;
popup.ondisplay = function(event) {
setTimeout(function() {
event.currentTarget.cancel();
}, showSec);
}
popup.show();
}
</script>
</body>
</html>