今天項(xiàng)目基本都提測(cè)完了，所有利用空閑時(shí)間，寫兩篇文章。上一篇《如何搭建node工程》想必大家有需要學(xué)習(xí)的都已經(jīng)看過了。這篇文章最后展示出來的效果確實(shí)很棒，所以在這里，想記錄下來，以后自己也可以看看。
還是和以前一樣的套路，咱們一步一步講，這樣看的思路很明了。
先看一下效果吧：
注意右下角，出現(xiàn)的彈出消息，我們實(shí)現(xiàn)的就是這樣的效果。
效果看完了，接下來就進(jìn)入分布講解模式了………..
第一步：先寫一個(gè)架子
接下來的代碼都是在script標(biāo)簽里面寫的，大家只要關(guān)心script標(biāo)簽里面的內(nèi)容即可：
<!DOCTYPE html> <html> <head lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8"> <meta content="" name="description"> <meta content="" name="keywords"> <meta content="eric.wu" name="author"> <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type"> <meta property="qc:admins" /> <meta content="telephone=no, address=no" name="format-detection"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <title>消息推送實(shí)例</title> </head> <body> 查看右下角，的消息通知.......... </body> </html> <script type="text/javascript"> </script>
第二步：判斷瀏覽器是否支持Web Notifications API
在這里判斷是否支持Web Notifications API，只有支持這個(gè)東西，我們才能繼續(xù)下來de 東西。
function justify_notifyAPI(){ if (window.Notification) { // 支持 console.log("支持"+"Web Notifications API"); } else { // 不支持 console.log("不支持"+"Web Notifications API"); } }第三步：判斷瀏覽器是否支持彈出實(shí)例
這里是一個(gè)彈框，判斷瀏覽器是否支持彈出實(shí)例（圖片地址換成你自己的地址即可）
function justify_showMess(){ if(window.Notification && Notification.permission !== "denied") { Notification.requestPermission(function(status) { if (status === "granted") { var n = new Notification('收到信息:-O', { body: '這里是通知內(nèi)容！你想看什么客官？', icon:"../../images/headerPic/QQ圖片20160525234650.jpg" }); } else{ var n = new Notification("baby! i will leave you!"); } }); }}第四步：實(shí)例展示彈出的內(nèi)容
Notification構(gòu)造函數(shù)的title屬性是必須的，用來指定通知的標(biāo)題，格式為字符串。options屬性是可選的，格式為一個(gè)對(duì)象，用來設(shè)定各種設(shè)置。該對(duì)象的屬性如下：
dir：文字方向，可能的值為auto、ltr（從左到右）和rtl（從右到左），一般是繼承瀏覽器的設(shè)置。
lang：使用的語種，比如en-US、zh-CN。
body：通知內(nèi)容，格式為字符串，用來進(jìn)一步說明通知的目的。
tag：通知的ID，格式為字符串。一組相同tag的通知，不會(huì)同時(shí)顯示，只會(huì)在用戶關(guān)閉前一個(gè)通知后，在原位置顯示。
icon：圖表的URL，用來顯示在通知上。
function otification_construct(){ var notification = new Notification('收到新郵件', { body: '您有1封來自雪靜的未讀郵件。', dir: "auto", lang:"zh-CN", tag: "a1", icon:"../../images/headerPic/772513932673948130.jpg" }); console.log(notification.title); // "收到新郵件" console.log(notification.body); // "您總共有3封未讀郵件。"}第五步：Notifications API的相關(guān)事件
Notification實(shí)例會(huì)觸發(fā)以下三種事件：
show：通知顯示給用戶時(shí)觸發(fā)。
click：用戶點(diǎn)擊通知時(shí)觸發(fā)。
close：用戶關(guān)閉通知時(shí)觸發(fā)。
error：通知出錯(cuò)時(shí)觸發(fā)（通知無法正確顯示時(shí)出現(xiàn)）。
這些事件有對(duì)應(yīng)的onshow、onclick、onclose、onerror方法，用來指定相應(yīng)的回調(diào)函數(shù)。addEventListener方法也可以用來為這些事件指定回調(diào)函數(shù)。
function otification_event(){ var MM = new Notification("Hi! My beautiful little princess！",{ body: '您有1封來外太空的郵件。', icon:"../../images/headerPic/20100114212301-1126264202.jpg" }); MM.onshow = function() { console.log('Notification showning!'); }; MM.onclick = function() { console.log('Notification have be click!'); }; MM.onerror = function() { console.log('Notification have be click!'); // 手動(dòng)關(guān)閉 MM.close(); };}這里基本功能已經(jīng)講解完畢，這里附上上面效果的Demo源碼：
<!DOCTYPE html><html><head lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8"> <meta content="" name="description"> <meta content="" name="keywords"> <meta content="eric.wu" name="author"> <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type"> <meta property="qc:admins" /> <meta content="telephone=no, address=no" name="format-detection"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <title>Web Notifications API</title></head><body> 查看右下角，的消息通知..........</body></html><script type="text/javascript"> window.onload= function(){ justify_notifyAPI(); //判斷瀏覽器是否支持 Web Notifications API justify_showMess(); //瀏覽器是否支持彈出實(shí)例 otification_construct(); //實(shí)例展示彈出的內(nèi)容 otification_event(); //Notifications API的相關(guān)事件 } //判斷瀏覽器是否支持 Web Notifications API function justify_notifyAPI(){ if (window.Notification) { // 支持 console.log("支持"+"Web Notifications API"); } else { // 不支持 console.log("不支持"+"Web Notifications API"); } } //瀏覽器是否支持彈出實(shí)例 function justify_showMess(){ if(window.Notification && Notification.permission !== "denied") { Notification.requestPermission(function(status) { if (status === "granted") { var n = new Notification('收到信息:-O', { body: '這里是通知內(nèi)容！你想看什么客官？', icon:"../../images/headerPic/QQ圖片20160525234650.jpg" }); // alert("Hi! this is the notifyMessages!"); } else{ var n = new Notification("baby! i will leave you!"); } }); } } // 實(shí)例展示彈出的內(nèi)容 function otification_construct(){ var notification = new Notification('收到新郵件', { body: '您有1封來自雪靜的未讀郵件。', dir: "auto", lang:"zh-CN", tag: "a1", icon:"../../images/headerPic/772513932673948130.jpg" }); console.log(notification.title); // "收到新郵件" console.log(notification.body); // "您總共有3封未讀郵件。" } //Notifications API的相關(guān)事件 function otification_event(){ var MM = new Notification("Hi! My beautiful little princess！",{ body: '您有1封來外太空的郵件。', icon:"../../images/headerPic/20100114212301-1126264202.jpg" }); MM.onshow = function() { console.log('Notification showning!'); }; MM.onclick = function() { console.log('Notification have be click!'); }; MM.onerror = function() { console.log('Notification have be click!'); // 手動(dòng)關(guān)閉 MM.close(); }; }</script>以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
