澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

澳门新萄京官方网站:Notifycations应用介绍,API桌

2019-04-26 作者:澳门新萄京赌场网址   |   浏览(155)

HTML5 web通知API介绍

2015/04/17 · HTML5 · 2 评论 · web通知

本文由 伯乐在线 - ElvisKang 翻译,周进林 校稿。未经许可,禁止转发!
英文出处:www.sevensignature.com。应接到场翻译组。

澳门新萄京官方网站 1

在采用网页版Gmail的时候,每当收到新邮件,显示屏的右下方都会弹出相应的提醒框。借助HTML伍提供的Notification API,我们也足以轻巧完毕如此的功力。

运用HTML伍的Notification API制作web布告的科目,html5notification

那篇文章首要介绍了利用HTML5的Notification API制作web布告的教程,示例蕴含须求使用到的连锁CSS以及Javascript代码,须求的爱人能够参照下

在应用网页版Gmail的时候,每当收到新邮件,荧屏的右下方都会弹出相应的提醒框。借助HTML5提供的Notification API,大家也得以轻巧落成如此的服从。
保障浏览器帮忙

假定您在一定版本的浏览器上进展付出,那么自个儿提出您先到 caniuse 查看浏览器对Notification API的协理情况,幸免你将难得时间浪费在了1个无法使用的API上。
什么样伊始  

JavaScript Code复制内容到剪贴板

  1. var notification=new Notification(‘Notification Title',{  
  2.     body:'Your Message'   
  3. });   
  4.   

上边的代码构造了两个简陋的公告栏。构造函数的率先个参数设定了通告栏的标题,而首个参数则是3个option 对象,该目的可安装以下属性:

  •     body :设置布告栏的正文内容。
        dir :定义通告栏文本的来得方向,可设为auto(自动)、ltr(从左到右)、rtl(从右到左)。
        lang :表明通告栏内文本所使用的语种。(译注:该属性的值必须属于BCP 四七language tag。)
        tag:为公告栏分配一个ID值,便于寻觅、替换或移除文告栏。
        icon :设置作为通知栏icon的图纸的UOdysseyL

得到权力

在呈现布告栏在此之前需向用户申请权限,只有用户同意,布告栏才可出未来显示器中。对权力申请的拍卖将有以下重回值:

  •     default:用户管理结果未知,因而浏览器将视为用户拒绝弹出布告栏。(“浏览器:你没须求布告,作者就不打招呼你了”)
        denied:用户拒绝弹出通知栏。(“用户:从本身的荧屏里滚开”)
        granted:用户同意弹出布告栏。(“用户:迎接!作者非常高兴可以使用那几个通告功效”)        

JavaScript Code复制内容到剪贴板

  1. Notification.requestPermission(function(permission){   
  2.     //display notification here making use of constructor   
  3.     });   
  4.   

用HTML创设1个按钮  

XML/HTML Code复制内容到剪贴板

  1. <button id="button">Read your notification</button>  
  2.   

不要遗忘了CSS  

CSS Code复制内容到剪贴板

  1. #button{   
  2.   font-size:1.1rem;   
  3.   width:200px;   
  4.   height:60px;   
  5.   border:2px solid #df7813;   
  6.   border-radius:20px/50px;   
  7.   background:#fff;   
  8.   color:#df7813;   
  9. }   
  10. #button:hover{   
  11.   background:#df7813;   
  12.   color:#fff;   
  13.   transition:0.4s ease;   
  14. }   
  15.   

成套的Javascript代码如下:  

JavaScript Code复制内容到剪贴板

  1. document.addEventListener('DOMContentLoaded',function(){   
  2. 澳门新萄京官方网站,        document.getElementById('button').addEventListener('click',function(){   
  3.             if(! ('Notification' in window) ){   
  4.                 alert('Sorry bro, your browser is not good enough to display notification');   
  5.                 return;   
  6.             }       
  7.             Notification.requestPermission(function(permission){   
  8.                 var config = {   
  9.                               body:'Thanks for clicking that button. Hope you liked.',   
  10.                               icon:'',   
  11.                               dir:'auto'  
  12.                               };   
  13.                 var notification = new Notification("Here I am!",config);   
  14.             });   
  15.         });   
  16.     });   
  17.   

从那段代码能够看出,假使浏览器不补助Notification API,在点击按键时将会产出警示“兄弟,很对不起。你的浏览器并不能够很好地支撑文告作用”(Sorry bro, your browser is not good enough to display notification)。不然,在获得了用户的允许之后,大家自制的布告栏便能够出现在显示器中间啦。

缘何要让用户手动关闭公告栏?

对此这几个主题材料,我们能够借助setTimeout函数设置二个岁月间隔,使布告栏能定期关闭。  

JavaScript Code复制内容到剪贴板

  1. var config = {   
  2.                body:'Today too many guys got eyes on me, you did the same thing. Thanks',   
  3.                icon:'icon.png',   
  4.                dir:'auto'  
  5.              }   
  6. var notification = new Notification("Here I am!",config);   
  7. setTimeout(function(){   
  8.     notification.close(); //closes the notification   
  9. },5000);   
  10.   

该说的事物就那么些了。假如你意犹未尽,希望更深远地问询Notification API,可以阅读以下的页面:

    MDN
    Paul lund’s tutorial on notification API

在CodePen上查看demo

您能够在CodePen上见到由Prakash (@imprakash)编写的demo。

API制作web布告的学科,html伍notification 那篇小说主要介绍了利用HTML伍的Notification API制作web布告的科目,示例包罗必要使用到...

点评:HTML5中的桌面提示(web notifications)可以在目前页面窗口弹出1个音讯框,这么些音信框是跨Tab 窗口的,那在用户张开多少个 tab 浏览网页时,提示相比较方便,轻松让用户看到

HTML5得以达成Notification API桌面文告功能,html五notification

怎么供给HTML五的桌面文告
历史观的桌面文告能够写二个div放到页面右下角自动掸出来,并透过轮询等等其余办法去获得新闻并推送给用户。那种格局有个弊端就是:当本身在运用京东 实行购物的时候,小编是不了解人们网有音信推送过来给本人的,而供给求等自己把当前页面切到人们网才领会有消息推送了。那种方式的新闻推送它是基于页面存活的, 然而我们供给如此1种政策:无论你在看哪个页面,只要有新闻都应该能推送给自己来看,那就是webkitNotification要减轻的难题。 Notification生成的新闻不依靠于有个别页面,仅仅依据于浏览器。
贰个桌面布告生成的寻常流程 大家先来看望五个桌面布告是什么样变迁的:
壹.反省浏览器是或不是援救Notification
2.检查浏览器的关照权限(是或不是同意通告)
3.若权力不够则收获浏览器的公告权限
四.创办消息公告
5.出示音讯文告
NOTE:关于率先点的表达须要做一些证实,Notification近来还并未有条件,所以目前只帮助chrome1九 和safari陆 ;英特网有资料呈现Firefox二陆 也支撑,不过自己拿自家的Firefox2柒检查测试的结果是力不从心支撑。
html五的桌面通告小编相信大家并不生分。常见的有网页版的微信等选用,要求安装桌面文告功效才方可采纳。
用客户端程序落成如此的作用并轻松。而守旧的网页版的桌面公告能够写2个div放到页面右下角自动掸出来,并经过轮询等等其余情势去获得消息并推送给用户。这种方法有个弊摆正是:当小编在选拔天猫实行购物的时候,小编是不明了和讯有音信推送过来给自己的,而必供给等作者把当前页面切到新浪乐乎才知道有新闻推送了。那种方法的消息推送它是依靠页面存活的, 但是大家须求如此壹种政策:无论你在看哪个页面,只要有音信都应当能推送给自个儿看出,那就是webkitNotification要缓和的难题。
Notification近期还尚未原则,所以你在w三cschool等网址上是学习不到的。可是近年来主流浏览器大多数都支持Notification。关于html5的桌面布告效果图如下:

澳门新萄京官方网站 2

 
代码如下:
XML/HTML Code复制内容到剪贴板

  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4. <meta charset="utf-8">    
  5. <title>html5桌面公告</title>    
  6. </head>    
  7. <body>    
  8. <input type="button" value="开启桌面公告" onclick="showNotice();">    
  9. <script>    
  10. function showNotice(){    
  11. Notification.requestPermission(function(status){    
  12. //status私下认可值'default'等同于拒绝 'denied' 意味着用户不想要公告 'granted' 意味着用户同意启用通知    
  13. if("granted" != status)    
  14. return;    
  15. var notify = new Notification("消息",{    
  16. dir:'auto',    
  17. lang:'zh-CN',    
  18. tag:'sds',//实例化的notification的id    
  19. //icon 支持ico、png、jpg、jpeg格式    
  20. icon:'    
  21. body:'html伍桌面公告' //通告的具体内容    
  22. });    
  23. notify.onclick=function(){    
  24. //假诺布告音信被点击,文告窗口将被激活    
  25. window.focus();    
  26. }    
  27. });    
  28. }    
  29. </script>    
  30. </body>    
  31. </html> 

如上内容是作者给大家大饱眼福的HTML5得以达成Notification API桌面公告功用,希望对我们全数辅助!
原文:

API桌面布告成效,html5notification 为何需求HTML五的桌面文告古板的桌面文告能够写二个div放到页面右下角自动掸出来,并...

  1. 缘何必要HTML5的桌面文告

保障浏览器辅助

假使你在特定版本的浏览器上举行开辟,那么本人建议你先到 caniuse 查看浏览器对Notification API的支撑景况,幸免你将贵重时间浪费在了二个不或者接纳的API上。

HTML5中的桌面提示(web notifications)能够在时下页面窗口弹出叁个信息框,这些音讯框是跨 Tab 窗口的,那在用户展开多少个 tab 浏览网页时,提醒比较便于,轻便让用户看到。方今如果是 webkit 内核援助该成效。
该成效在 chrome 下要求以 http 方式展开网页才具启用。
桌面提示功用由 window.webkitNotifications 对象实现(webkit内核)。
window.webkitNotifications 对象没有质量,有四个办法:
1.requestPermission()
  该方法用于向用户申请信息提醒权限,假设当前尚未开放该权限,浏览器将弹出授权分界面,用户授权后,在目的内部爆发叁个状态值(一个0、一或 2 的平头):
0:表示用户同意音信指示,只在该景况下能够动用新闻提醒功用;
壹:表示私下认可状态,用户既未拒绝,也未同意;
二:表示用户拒绝音讯提示。
2.checkPermission()   这么些法子用于获取 requestPermission() 申请到的权能的情状值。
3.createNotification()
  那个措施以纯音信的不2秘技开创提醒音信,它接受多少个字符串参数:
iconUHummerH二L:在新闻中显得的Logo地址,
title:新闻的题目,
body:新闻主体文本内容
该方法会重返二个 Notification对象,能够针对那个目标做越多的装置。
Notification 对象的性质与方法:

守旧的桌面文告能够写2个div放到页面右下角自动掸出来,并因此轮询等等其余方法去获得音信并推送给用户。那种办法有个弊端就是:当自家在应用京东张开购物的时候,小编是不知底人们网有音信推送过来给自身的,而必要求等笔者把当前页面切到人们网才晓得有音讯推送了。那种方法的新闻推送它是依靠页面存活的,可是大家需求如此1种政策:无论你在看哪个页面,只要有音信都应当能推送给作者看齐,这正是webkitNotification要减轻的难点。Notification生成的音讯不依靠于有个别页面,仅仅依靠于浏览器。

何以开端

JavaScript

var notification=new Notification(‘Notification Title',{ body:'Your Message' });

1
2
3
var notification=new Notification(‘Notification Title',{
    body:'Your Message'
});

地点的代码构造了一个简陋的公告栏。构造函数的首先个参数设定了公告栏的标题,而第四个参数则是三个option 对象,该目的可设置以下属性:

  • body :设置通告栏的正文内容。
  • dir :定义文告栏文本的展现方向,可设为auto(自动)、ltr(从左到右)、rtl(从右到左)。
  • lang :注脚文告栏内文本所使用的语种。(译注:该属性的值必须属于BCP 47 language tag。)
  • tag:为布告栏分配二个ID值,便于寻找、替换或移除公告栏。
  • icon :设置作为公告栏icon的图形的U索罗德L

代码如下:

 

得到权力

在呈现公告栏在此以前需向用户申请权限,只有用户同意,公告栏才可出现在显示屏中。对权力申请的管理将有以下重临值:

  • default:用户管理结果未知,由此浏览器将视为用户拒绝弹出通告栏。(“浏览器:你没需要照看,作者就不打招呼你了”)
  • denied:用户拒绝弹出通告栏。(“用户:从自身的显示器里滚开”)
  • granted:用户同意弹出公告栏。(“用户:应接!小编很欢快可以利用那些布告成效”)
JavaScript

Notification.requestPermission(function(permission){ //display
notification here making use of constructor });

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f063d76a49818832322-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f063d76a49818832322-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f063d76a49818832322-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f063d76a49818832322-1" class="crayon-line">
Notification.requestPermission(function(permission){
</div>
<div id="crayon-5b8f063d76a49818832322-2" class="crayon-line crayon-striped-line">
//display notification here making use of constructor
</div>
<div id="crayon-5b8f063d76a49818832322-3" class="crayon-line">
});
</div>
</div></td>
</tr>
</tbody>
</table>

用HTML创制二个按键

XHTML

<button id="button">Read your notification</button>

1
<button id="button">Read your notification</button>

毫不遗忘了CSS

CSS

#button{ font-size:1.1rem; width:200px; height:60px; border:2px solid #df7813; border-radius:20px/50px; background:#澳门新萄京官方网站:Notifycations应用介绍,API桌面通知功能。fff; color:#df7813; } #button:hover{ background:#df7813; color:#fff; transition:0.4s ease; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#button{
  font-size:1.1rem;
  width:200px;
  height:60px;
  border:2px solid #df7813;
  border-radius:20px/50px;
  background:#fff;
  color:#df7813;
}
#button:hover{
  background:#df7813;
  color:#fff;
  transition:0.4s ease;
}

一切的Javascript代码如下:

JavaScript

document.addEventListener('DOMContentLoaded',function(){ document.getElementById('button').addEventListener('click',function(){ if(! ('Notification' in window) ){ alert('Sorry bro, your browser is not good enough to display notification'); return; } Notification.requestPermission(function(permission){ var config = { body:'Thanks for clicking that button. Hope you liked.', icon:'', dir:'auto' }; var notification = new Notification("Here I am!",config); }); }); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
document.addEventListener('DOMContentLoaded',function(){
        document.getElementById('button').addEventListener('click',function(){
            if(! ('Notification' in window) ){
                alert('Sorry bro, your browser is not good enough to display notification');
                return;
            }    
            Notification.requestPermission(function(permission){
                var config = {
                              body:'Thanks for clicking that button. Hope you liked.',
                              icon:'https://cdn2.iconfinder.com/data/icons/ios-7-style-metro-ui-icons/512/MetroUI_HTML5.png',
                              dir:'auto'
                              };
                var notification = new Notification("Here I am!",config);
            });
        });
    });

从那段代码能够见到,假如浏览器不帮助Notification API,在点击开关时将会冒出警示“兄弟,很对不起。你的浏览器并不能够很好地支撑文告作用”(Sorry bro, your browser is not good enough to display notification)。不然,在获得了用户的同意之后,我们自制的布告栏便能够出现在显示屏中间啦。

干什么要让用户手动关闭公告栏?

对于那个难点,我们得以依据setTimeout函数设置三个年华距离,使布告栏能按时关闭。

JavaScript

var config = { body:'Today too many guys got eyes on me, you did the same thing. Thanks', icon:'icon.png', dir:'auto' } var notification = new Notification("Here I am!",config); setTimeout(function(){ notification.close(); //closes the notification },5000);

1
2
3
4
5
6
7
8
9
var config = {
               body:'Today too many guys got eyes on me, you did the same thing. Thanks',
               icon:'icon.png',
               dir:'auto'
             }
var notification = new Notification("Here I am!",config);
setTimeout(function(){
    notification.close(); //closes the notification
},5000);

该说的事物就这几个了。如若您意犹未尽,希望进一步一语道破地询问Notification API,能够阅读以下的页面:

  • MDN
  • Paul lund’s tutorial on notification API

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

  1. 多个桌面文告生成的符合规律流程

在CodePen上查看demo

您可以在CodePen上看看由Prakash (@imprakash)编写的demo。

赞 收藏 2 评论

dir:设置音信的排列方向,可取值为“auto”(自动), “ltr”(left to right), “rtl”(right to left)。
  tag:为消息增添标具名。假设设置此属性,当有新新闻提示时,标签一样的新闻只体今后同一个音讯框,后三个新闻框会替换先前三个,否则出现四个音信提示框,可是最多值显示二个音讯框,超过一个,后继音讯通告会被打断。
  onshow:当音信框展现的时候触发该事件;
  onclick: 当点击新闻框的时候触发该事件;
  onclose:当新闻关闭的时候触发该事件;
  onerror:当出现谬误的时候触发该事件;
方法:
  add伊芙ntListener && remove伊芙ntListener:常规的丰硕和移除事件措施;
  show:彰显消息提示框;
  close:关闭新闻提示框;
  cancel:关闭音讯提示框,和 close同样;
4.createHTMLNotification()
  该措施与 createNotification() 不一样的是,他以HTML格局创设音讯,接受2个参数: HTML 文件的U科雷傲L,该方法一样再次来到 Notification对象。
一个实例:

大家先来看望三个桌面布告是何等变迁的:

至于小编:ElvisKang

澳门新萄京官方网站 3

QQ:285273704博客园:@康恺暄邮箱:elviskang@foxmail.com 个人主页 · 我的篇章 · 10

澳门新萄京官方网站 4

代码如下:

 

<!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 = "";
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>

反省浏览器是还是不是支持Notification

反省浏览器的打招呼权限(是不是允许通告)

若权力不够则收获浏览器的公告权限

创设音讯公告

呈现音信公告

NOTE: 关于率先点的辨证必要做一些评释,Notification目前还并未有标准,所以近日只帮助chrome19 和safari6 ;英特网有材质展现Firefox二陆 也支撑,不过自身拿自身的Firefox27检查实验的结果是心有余而力不足支撑。

  1. notification api基础表明及代码示例

目前notification的落到实处有二种:一种是前边草案中的格局:webkitNotifications对象, 另一种便是将来标准的情势:Notification对象。首先来讲一下webkitNotifications所富含的剧情:

 

3.1 webkitNotifications:

3.一.1. 静态方法

 

window.webkitNotifications.checkPermission()

//该办法再次来到0, 一, 二八个值,0代表PE卡宴MISSION_ALLOWED,即’允许’;1代表PERMISSION_NOT_ALLOWED,即不容许;二意味着PE奥迪Q三MISSION_DENIED,即拒绝

window.webkitNotifications.requestPermission()

//调用该措施将会在浏览器的音讯栏弹出1个是不是同意桌面通告的唤醒,该方法只好由用户积极事件触发,如click 或 mouse over,也正是说你不可能在document.ready里面平素调用该措施。

window.webkitNotifications.createNotification('icon-url','title', 'body' )

//调用该措施将赶回三个实例化的webkitNotifications对象

PS:调用以上办法都会设有安全特别,也正是近年来页面包车型客车permission是或不是为0。

 

notificationInstance.show()

//调用该格局将要右下角弹出1个通报窗口

notificationInstance.cancel()

//调用该措施将闭馆布告窗口

3.2 Notification:

在chrome二陆 终端里面输入window.Notification并键入回车键,会发掘那东西它也是存在的,依照一些博客的说教,那些Notification会是webkitNotifications的尺码形态(有趣的事中的进化),那种形式的贯彻相对于webkitNotifications的贯彻更简短,更面向对象一些。 构造函数:

 

 

Notification(title, options)

//@param {String} title 要呈现的照顾标题

//@param {Object} options 备选项参数,键值对

//option 结构如下

dictionary NotificationOptions {

  NotificationDirection dir = "auto";

  DOMString lang = "";

  DOMString body;

  DOMString tag;

  DOMString icon;//在实例化的时候会异步的去获得

};

 

1

2

//新建1个Notification实例,并依附permission为'granted'来形成notification的显得

var notification = new Notification('Hello Notification',{body:"I'm an enginneer!"});

3.2.1. 属性

静态属性:

Notification.Permission:

 

'default' 等同于拒绝 'denied' 意味着用户不想要布告 'granted' 意味着用户同意启用通告

 

Test:在chrome的地址栏里面输入, 张开console,并在内部输入Notification.Permission 暗中同意再次回到的是'default'.

 

Notes:该属性是只读的无法手动修改

 

 

//在百度的首页张开console

Notification.Permission = 'granted'

Notification.Permission   //'default'

实例属性:

以下属性都急需在Notification实例上才干访问,为只读属性,并且即便通过option来赋值

 

 

Notification.dir    //

Notification.lang

Notification.Body   //通告的具体内容

Notification.tag    //实例化的notification的id

Notification.icon   //公告的缩略图

3.2.2 方法

静态方法

Notification.requestPermission() ``` //该方法将会领悟用户是不是同意显示布告 ``` 该格局不能够由页面自己作主调用,必须由用户积极事件触发,依然以百度的页面为例,百度的寻找框的id为'kw':

 

//不通过事件触发直接调用

Notification.requestPermission()

//页面无反应

```Javascript //通过用户主动事件触发来调用 document.getElementById('kw').onclick=function(){ Notification.requestPermission(); }; //页面新闻栏会弹出询问用户是或不是同意突显桌面公告

```

 

Notes:当用户同意今后,再次调用该措施则不算,即该形式仅对Notification.Permission不为'granted'的时候起成效

 

实例方法

1

Notification.close()    //该措施允许通过代码调节关掉notification

Notes: Notification 未有实例方法show(),在Notification实例化的时候,浏览器就曾经自行的去管理notification的显得过程了。

 

三.3 代码示例

以下代码将展现什么利用webkitNotification和Notification来呈现桌面布告

 

 

document.getElementById('notifyButton').onclick = function(){

    //决断浏览器是还是不是协助notification

    if(window.webkitNotifications){

        //判定当前页面是不是被允许爆发通报

        if(webkitNotifications.checkPermission==0){

            var icon_url = '';

            var title = 'Hello HTML5';

            var body = 'I will be always here waiting for you!';

            var WebkitNotification = webkitNotifications.createNotification(icon_url, title, body);

            WebkitNotification.show();

        }else{

            document.getElementById('requestbutton').onclick = function () {

                webkitNotifications.requestPermission();

            };

        }

    }else alert("您的浏览器不帮衬桌面文告脾气,请下载谷歌(Google)浏览器试用该意义");

};

3.3.2 Notification

 

document.getElementById('notifyButton').onclick = function () {

    if (window.Notification){

        if(Notification.Permission==='granted'){

            var notification = new Notification('Hello Notification',{body:"I hope that all the browser will support this                   function!"});

        }else {

            document.getElementById('requestButton').onclick = function (){

                Notification.requestPermission();

            };

        };

    }else alert('你的浏览器不援助此天性,请下载谷歌(谷歌(Google))浏览器试用该作用');

};

. 为啥须求HTML5的桌面文告古板的桌面文告能够写3个div放到页面右下角自动掸出来,并由此轮询等等其余办法去获取新闻并推送给用户...

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:澳门新萄京官方网站:Notifycations应用介绍,API桌

关键词:

  • 上一篇:没有了
  • 下一篇:没有了