溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

HTML5的Notifycations怎么應(yīng)用

發(fā)布時間：2022-03-09 10:59:22 來源：億速云 閱讀：139 作者：iii 欄目：web開發(fā)

今天小編給大家分享一下HTML5的Notifycations怎么應(yīng)用的相關(guān)知識點，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

HTML5中的桌面提醒（網(wǎng)絡(luò)通知）可以在當(dāng)前頁面窗口上放置一個消息框，這個消息框是跨Tab窗口的，這在用戶打開多個tab瀏覽網(wǎng)頁時，提醒比較方便，容易讓用戶看到。只要是webkit內(nèi)核支持該功能。

該功能在chrome下需要以http方式打開網(wǎng)頁才能

啟用。桌面提醒功能由window.webkitNotifications對象實現(xiàn)（webkit內(nèi)核）

window.webkitNotifications對象沒有屬性，有四個方法：

1.requestPermission（）

　　該方法用于向用戶申請消息提醒權(quán)限，如果當(dāng)前沒有開放該權(quán)限，瀏覽器將打開授權(quán)界面，用戶授權(quán)后，在對象內(nèi)部產(chǎn)生一個狀態(tài)值（一個0、1或2的整數(shù)）：

0：表示用戶同意消息提醒，只在該狀態(tài)下可以使用信息提醒功能；

1：表示狀態(tài)，用戶既未拒絕，也未同意；

2：表示用戶拒絕消息提醒

2.checkPermission（）

　　這個方法用于獲取requestPermission（）申請到的權(quán)限的狀態(tài)值。

3.createNotification（）

　　這個方法以純消息的方式創(chuàng)建提醒消息，它接受三個字符串參數(shù)：

iconURL：消息在顯示中的圖標(biāo)種植地址，

標(biāo)題：消息的標(biāo)題，

body：消息主體文本內(nèi)容

該方法會返回一個Notification對象，可以針對這個對象做更多的設(shè)置。Notification

對象的屬性與方法：

復(fù)制代碼代碼如下： 

DIR： “”

的onclick：空

的OnClose：空

ondisplay：功能（事件）{

的onerror：空

OnShow中：空

replaceId： “”

標(biāo)簽： “”

__ PR oto__：通知

的addEventListener：功能的addEventListener（）{[本地代碼]}

取消：函數(shù)cancel（）{[本機代碼]}

close：函數(shù)close（）{[本機代碼]}

構(gòu)造函數(shù)：函數(shù)Notification（）{[本機代碼]}

dispatchEvent：函數(shù)dispatchEvent（）{[本機代碼]}

removeEventListener：函數(shù)removeEventListener （）{[本機代碼]}

show：函數(shù)show（）{[本機代碼]}

__proto__：對象

dir：設(shè)置消息的分配方向，可取到“ auto”（自動），“ ltr”（從左到右），“ rtl”（從右到左）。

　　標(biāo)簽：為消息添加標(biāo)簽名。如果設(shè)置此屬性，當(dāng)有新消息提醒時，標(biāo)簽相同的消息只顯示在同一個消息框，后一個消息框會替換先前一個，否則出現(xiàn)多個消息提示框，但最大值顯示3個消息框，超過3個，后繼消息通知會被阻塞。

　　OnShow中：當(dāng)消息框顯示的時候觸發(fā)該事件;

　　的onclick：當(dāng)點擊消息框的時候觸發(fā)該事件;

　　OnClose中：當(dāng)消息關(guān)閉的時候觸發(fā)該事件;

　　的onerror：當(dāng)出現(xiàn)錯誤的時候觸發(fā)該事件；

方法：

　　addEventListener && removeEventListener：常規(guī)的添加和

　　刪除事件方法；顯示：顯示消息提醒框；

　　關(guān)閉：關(guān)閉消息提醒框；

　　取消：關(guān)閉消息提醒框，和close一樣；

4.createHTMLNotification（）

　　該方法與createNotification（）不同的是，他以HTML方式創(chuàng)建消息，接受一個參數(shù)：HTML文件的URL，該方法同時返回Notification對象。

一個實例：

復(fù)制代碼代碼如下： 

<！DOCTYPE HTML>

<html>

<head>

<title> HTML5中的通知</ title>

</ head>

<body>

<form>

<input id =“ trynotification” type =“ button” value =“發(fā)送通知” / >

</ form>

<script type =“ text / javascript”>

document.getElementById（“ trynotification”）。onclick = function（）{

notify（Math.random（））;

};

函數(shù)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（）{

權(quán)限= window.webkitNotifications.checkPermission（）;

if（permission == 0）{

createNotification（tab）;

}否則if（new Date（）-requestTime <waitTime）{

setTimeout（arguments.callee，checkPerMiniSec ）;

}

}，checkPerMiniSec）;

}否則if（permission == 0）{

createNotification（tab）;

}

}

函數(shù)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）+“秒”之后關(guān)閉；

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怎么應(yīng)用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手