html5 桌面提醒：Notifycations應用介紹_html5教學技巧

HTML5中的桌面提醒（web notifications）可以在目前頁面視窗彈出一個訊息框，這個訊息框是跨 Tab 視窗的，這在使用者開啟多個 tab 瀏覽網頁時，提醒比較方便，容易讓使用者看到。目前只要是 webkit 核心支援該功能。
此功能在 chrome 下需要以 http 方式開啟網頁才能啟用。
桌面提醒功能由 window.webkitNotifications 物件實作（webkit核心）。
window.webkitNotifications 物件沒有屬性，有四個方法：
1.requestPermission()
　　此方法用於向使用者申請訊息提醒權限，如果目前沒有開放該權限，瀏覽器將彈出授權介面，使用者授權後，在物件內部產生一個狀態值（一個0、1或2 的整數）：
0：表示使用者同意訊息提醒，只在該狀態下可以使用訊息提醒功能；
1：表示預設狀態，使用者既未拒絕，也未同意；
2：表示使用者拒絕訊息提醒。
2.checkPermission()
　　這個方法用來取得 requestPermission() 所申請的權限的狀態值。
3.createNotification()
　　這個方法以純訊息的方式建立提醒訊息，它接受三個字串參數：
iconURL：在訊息中顯示的圖示位址,
title：訊息的標題，
body：訊息主體文字內容
此方法會傳回一個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: function close) { native code] }
constructor: function Notification() { [native code] }
dispatchEvent: function dispatchEvent() { [native code] }
removeListener: functionEventList 🎜>show: function show() { [native code] }
__proto__: Object


dir：設定訊息的排列方向，可取值為「auto」(自動), “ltr 」(left to right), 「rtl」(right to left)。
　　tag：為訊息新增標籤名稱。如果設定此屬性，當有新訊息提醒時，標籤相同的訊息只顯示在同一個訊息框，後一個訊息框會取代先前一個，否則出現多個訊息提示框，但是最多值顯示3個訊息框，超過3個，後繼訊息通知會被阻塞。
　　onshow：當訊息框顯示的時候觸發該事件；
　　onclick： 當訊息框顯示的時候觸發該事件；
　　onclose：當訊息關閉的時候觸發該事件；
　　onclose：當訊息關閉的時候觸發該事件；
　〟出現錯誤的時候觸發該事件；
方法：
　　addEventListener && removeEventListener：常規的新增和移除事件方法；
　　show：顯示訊息提醒框；
　　close：關閉訊息框； 🎜>　　cancel：關閉訊息提醒框，和close一樣；

4.createHTMLNotification()

　　該方法與createNotification() 不同的是，他以HTMLMLML 方式建立訊息，接受一個參數參數： HTML 檔案的URL，該方法同樣傳回Notification物件。
一個實例：





複製程式碼


程式碼如下: