HTML5中的Web Notification桌面右下角通知功能的實(shí)現(xiàn)
發(fā)布時(shí)間：2018-04-19 15:32:37 作者：佚名 
我要評論
我要評論這篇文章主要介紹了HTML5中的Web Notification桌面右下角通知功能的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
html5桌面通知(Web Notifications)對于需要實(shí)現(xiàn)在新消息入線時(shí)，有桌面通知效果的情況下非常有用，在此簡單介紹一下這個(gè)html5的新屬性。通過Web Notifications（桌面通知系統(tǒng)），網(wǎng)站可以在用戶桌面彈出一條通知，無論用戶是否瀏覽當(dāng)前網(wǎng)頁，甚至最小化了瀏覽器，通知均可到達(dá)用戶桌面。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<a onclick="showNotification();">點(diǎn)我看右下角信息</a>
<script>
function showNotification() {
window.Notification.permission = "granted";
alert(window.Notification.permission);
if(window.Notification) {
if(window.Notification.permission == "granted") {
var notification = new Notification('你有一條新信息', {
body: "你好我是王小婷",
icon: "img/1.jpg"
});
setTimeout(function() { notification.close(); }, 5000);
} else {
window.Notification.requestPermission();
}
} else alert('你的瀏覽器不支持此消息提示功能，請使用chrome內(nèi)核的瀏覽器！');
};
</script>
</body>
</html>
實(shí)現(xiàn)效果：
總結(jié)
以上所述是小編給大家介紹的HTML5中的Web Notification桌面右下角通知功能的實(shí)現(xiàn)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
使用HTML5的Notification API制作web通知的教程
這篇文章主要介紹了使用HTML5的Notification API制作web通知的教程,示例包括需要使用到的相關(guān)CSS以及Javascript代碼,需要的朋友可以參考下2015-05-08html5桌面通知(Web Notifications)實(shí)例解析
這篇文章主要為大家介紹了html5桌面通知(Web Notifications)實(shí)例，對于進(jìn)行html5網(wǎng)站建設(shè)非常有用！需要的朋友可以參考下2014-07-07
HTML5之消息通知的使用(Web Notification)
通知可以說是web中比較常見且重要的功能，私信、在線提問、或者一些在線即時(shí)通訊工具我們總是希望第一時(shí)間知道對方有了新的反饋。本篇文章主要介紹了HTML5之消息通知的使用2018-10-30
