JS實現瀏覽器通知功能

2022-09-18 17:57:11 字數 1759 閱讀 4972

notification api是瀏覽器的通知介面,用於在使用者的桌面(而不是網頁上)顯示通知資訊,桌面電腦和手機都適用,比如通知使用者收到了一封email,具體的實現形式由瀏覽器自行部署,對於手機來說,一般顯示在頂部的通知欄。

如果網頁**呼叫這個api,瀏覽器會詢問使用者是否接受,只有在使用者同意的情況下,通知資訊才會顯示。

下面的**用於檢查瀏覽器是否支援這個api。

if (window.notification)  else

目前,chrome 和 firefox 在桌面端部署了這個api,firefox和blackberry在手機端部署了這個api。

if(window.notification && notification.permission !== "denied") ); 

});}

上面**檢查當前瀏覽器是否支援notification物件,並且當前使用者准許使用該物件,然後呼叫notification.requestpermission 方法,向使用者彈出一條通知。

notification.permission屬性,用於讀取使用者給予的許可權,它是乙個唯讀屬性,它有三種狀態。

notification.requestpermission方法用於讓使用者做出選擇,到底是否接收通知。它的引數是乙個**函式,該函式可以接收使用者授權狀態作為引數。

notification.requestpermission(function (status)  else 

});

上面**表示,如果使用者拒絕接收通知,可以用alert方法代替。

notification物件作為建構函式使用時,用來生成一條通知。

var notification = new notification(title, options);

notification建構函式的title屬性是必須的,用來指定通知的標題,格式為字串。options屬性是可選的,格式為乙個物件,用來設定各種設定。該物件的屬性如下:

上面這些屬性,都是可讀寫的。下面是乙個生成notification例項物件的例子。

var notification = new notification('收到新郵件', );

notification.title // "收到新郵件"

notification.body // "您總共有3封未讀郵件。"

notification例項會觸發以下事件。

這些事件有對應的onshow、onclick、onclose、onerror方法,用來指定相應的**函式。addeventlistener方法也可以用來為這些事件指定**函式。

notification.onshow = function() ;

notification例項的close方法用於關閉通知。

var n = new notification("hi!");

// 手動關閉

n.close();

// 自動關閉

n.onshow = function ()

上面**說明,並不能從通知的close事件,判斷它是否為使用者手動關閉。

注意:

個人測試發現:該功能只有在伺服器發布的頁面下才可以出效果,靜態頁面沒有任何效果也不報錯。

瀏覽器通知

if window.notification notification.onclick function button.onclick function else if notification.permission denied else 使用簡單,易懂。以下是api 屬性名釋義 dirlang ...

js 實現各瀏覽器全屏

前端小獅 全屏 function fullscreen return 退出全屏 function exitscreen else if document.mozcancelfullscreen else if document.webkitcancelfullscreen else if docum...

js判斷瀏覽器,包括Edge瀏覽器

描述 判斷瀏覽器資訊 編寫 littleqiang w 日期 2016.1.5 版本 v1.1 判斷當前瀏覽型別 function browsertype else if fieversion 8 else if fieversion 9 else if fieversion 10 else ie版...