HTML5中的Web Notification桌面右下角通知功能的實現

2024-09-05 07:22:29

字體：大中小

來源：轉載

供稿：網友

html5桌面通知(Web Notifications)對于需要實現在新消息入線時，有桌面通知效果的情況下非常有用，在此簡單介紹一下這個html5的新屬性。通過Web Notifications（桌面通知系統），網站可以在用戶桌面彈出一條通知，無論用戶是否瀏覽當前網頁，甚至最小化了瀏覽器，通知均可到達用戶桌面。

<!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();">點我看右下角信息</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內核的瀏覽器！');            };        </script>    </body></html>

實現效果：