目錄
- 內容介紹
- 一、用戶授權（相同域名只需用戶授權一次）
- 1、獲取授權資訊
- 二、彈窗
- 1、顯示彈窗
- 2、引數
- 2.1、title
- 2.2、options(可選)
- 3、隱藏彈窗
- 4、事件
- 4.1、onclick：點擊時
- 4.2、onshow： 顯示時
- 4.3、onclose：關閉時
- 4.4、onerror：例外時
- 5、環境
- 三、示例地址
內容介紹
Notification 向用戶顯示通知資訊（即時用戶不在當前標簽頁，或瀏覽器已經最小化），兼容性較差，
一、用戶授權（相同域名只需用戶授權一次）
1、獲取授權資訊
??Notification.permission
console.log(Notification.permission);
Notification.requestPermission().then(function(permission) {
if (permission === 'granted') {
console.log('用戶允許通知');
} else if (permission === 'denied') {
console.log('用戶拒絕通知');
}
});
| 引數 | 說明 |
|---|---|
| default | 默認，不知用戶選擇 |
| granted | 用戶允許 |
| denied | 用戶拒絕 |
二、彈窗
1、顯示彈窗
let myNotification = new Notification(title, options);
2、引數
2.1、title
通知標題，顯示在通知視窗頂部
2.2、options(可選)
options物件包含應用于通知的任何自定義設定選項
| 引數 | 說明 |
|---|---|
| dir | 通知方向，默認auto，也可設定ltr(從左往右)和rtl(從右往左) |
| lang | 通知語言 |
| badge | 通知的影像URL |
| body | 通知正文，顯示在標題下方 |
| tag | 通知的識別標簽 |
| icon | 通知中顯示的圖示URL |
| image | 要在通知中顯示的影像URL |
| data | 與通知相關聯的任意資料 |
| vibrate | 支持振動的設備，通知時觸發 |
| renotify | 新通知代替舊通知時是否通知用戶 |
| requireInteraction | 表示通知應保持有效，直到用戶點擊或關閉它，而不是自動關閉，默認值為false |
注： | 以下為最新規范，所有瀏覽器均不支持 |
| silent | 指明通知是否應該是無聲的,即,不需要發出聲音或振動，無論設備設定如何，默認值為false，這意味著它不會保持靜默 |
| sound | 包含通知觸發時要播放的音頻檔案的URL |
| noscreen | 指定通知觸發是否應啟用設備的螢屏， 默認值為false，這意味著它將啟用螢屏 |
| sticky | 指明通知是否應該是“粘”, 即不易被用戶清理，默認值為false，這意味著它不會粘 |
3、隱藏彈窗
Notification.close()
4、事件
4.1、onclick：點擊時
Notification.onclick = function(event) {
event.preventDefault();
window.open('http://www.mozilla.org', '_blank');
}
4.2、onshow： 顯示時
Notification.onshow = function(event) {
console.log("觸發show");
}
4.3、onclose：關閉時
Notification.onclose = function(event) {
console.log("觸發close");
}
4.4、onerror：例外時
Notification.onerror = function(event) {
console.log("觸發error");
}
5、環境
注：
??本地環境只有授權彈窗，沒有通知彈窗，控制臺顯示以下提示，需要使用https
??如沒有授權彈窗，需在瀏覽器中設定通知權限，chrome瀏覽器為例：
三、示例地址
示例地址：https://liujianwei695.gitee.io/phpsession/
標簽：HTML5，通知彈窗，桌面通知，Notification
更多演示案例，查看 案例演示
歡迎評論留言!
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/277684.html
標籤：其他
下一篇：KMP演算法（c語言實作）