溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下HTML5的Notifycations怎么應用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
HTML5中的桌面提醒（網絡通知）可以在當前頁面窗口上放置一個消息框，這個消息框是跨Tab窗口的，這在用戶打開多個tab瀏覽網頁時，提醒比較方便，容易讓用戶看到。只要是webkit內核支持該功能。
該功能在chrome下需要以http方式打開網頁才能
啟用。桌面提醒功能由window.webkitNotifications對象實現（webkit內核）
window.webkitNotifications對象沒有屬性，有四個方法：
1.requestPermission（）
該方法用于向用戶申請消息提醒權限，如果當前沒有開放該權限，瀏覽器將打開授權界面，用戶授權后，在對象內部產生一個狀態值（一個0、1或2的整數）：
0：表示用戶同意消息提醒，只在該狀態下可以使用信息提醒功能；
1：表示狀態，用戶既未拒絕，也未同意；
2：表示用戶拒絕消息提醒
2.checkPermission（）
這個方法用于獲取requestPermission（）申請到的權限的狀態值。
3.createNotification（）
這個方法以純消息的方式創建提醒消息，它接受三個字符串參數：
iconURL：消息在顯示中的圖標種植地址，
標題：消息的標題，
body：消息主體文本內容
該方法會返回一個Notification對象，可以針對這個對象做更多的設置。Notification
對象的屬性與方法：
復制代碼代碼如下：
DIR： “”
的onclick：空
的OnClose：空
ondisplay：功能（事件）{
的onerror：空
OnShow中：空
replaceId： “”
標簽： “”
__ PR oto__：通知
的addEventListener：功能的addEventListener（）{[本地代碼]}
取消：函數cancel（）{[本機代碼]}
close：函數close（）{[本機代碼]}
構造函數：函數Notification（）{[本機代碼]}
dispatchEvent：函數dispatchEvent（）{[本機代碼]}
removeEventListener：函數removeEventListener （）{[本機代碼]}
show：函數show（）{[本機代碼]}
__proto__：對象
dir：設置消息的分配方向，可取到“ auto”（自動），“ ltr”（從左到右），“ rtl”（從右到左）。
標簽：為消息添加標簽名。如果設置此屬性，當有新消息提醒時，標簽相同的消息只顯示在同一個消息框，后一個消息框會替換先前一個，否則出現多個消息提示框，但最大值顯示3個消息框，超過3個，后繼消息通知會被阻塞。
OnShow中：當消息框顯示的時候觸發該事件;
的onclick：當點擊消息框的時候觸發該事件;
OnClose中：當消息關閉的時候觸發該事件;
的onerror：當出現錯誤的時候觸發該事件；
方法：
addEventListener && removeEventListener：常規的添加和
刪除事件方法；顯示：顯示消息提醒框；
關閉：關閉消息提醒框；
取消：關閉消息提醒框，和close一樣；
4.createHTMLNotification（）
該方法與createNotification（）不同的是，他以HTML方式創建消息，接受一個參數：HTML文件的URL，該方法同時返回Notification對象。
一個實例：
復制代碼代碼如下：
<！DOCTYPE HTML>
<html>
<head>
<title> HTML5中的通知</ title>
</ head>
<body>
<form>
<input id =“ trynotification” type =“ button” value =“發送通知” / >
</ form>
<script type =“ text / javascript”>
document.getElementById（“ trynotification”）。onclick = function（）{
notify（Math.random（））;
};
函數notify（tab）{
如果（！window.webkitNotifications）{
返回false；
}
varPermission = window.webkitNotifications.checkPermission（）;
if（permission！= 0）{
window.webkitNotifications.requestPermission（）;
var requestTime = new Date（）;
var waitTime = 5000;
var checkPerMiniSec = 100;
setTimeout（function（）{
權限= window.webkitNotifications.checkPermission（）;
if（permission == 0）{
createNotification（tab）;
}否則if（new Date（）-requestTime <waitTime）{
setTimeout（arguments.callee，checkPerMiniSec ）;
}
}，checkPerMiniSec）;
}否則if（permission == 0）{
createNotification（tab）;
}
}
函數createNotification（tab）{
var showSec = 10000;
var icon =“ http://tech.baidu.com/resource/img/logo_news_137_46.png”;
var title =“ [” + new Date（）。toLocaleTimeString（）+“]在” +（showSec / 1000）+“秒”之后關閉；
var body =“你好，世界，
var popup = window.webkitNotifications.createNotification（icon，title，body）;
popup.tag =選項卡;
popup.ondisplay = function（event）{
setTimeout（function（）{
event.currentTarget.cancel（）;
}，showSec）;
}
popup.show（）;
}
</ script>
</ body>
</ html>
以上就是“HTML5的Notifycations怎么應用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
