HTML5基础知识 - JavaScript API - Notifications - 简单通知

创建Notifications对象，通过requestPermission征求用户对于网站通知的许可。使用tag参数避免多条通知，使用icon来设置图标通知，使用body来设置通知内容。

notifications

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1958
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

window.addEventListener('load', function() {
    // At first, let's check if we have permission for notification
    // If not, let's ask for it
    if (window.Notification && Notification.permission !== "granted") {
        Notification.requestPermission(function(status) {
            if (Notification.permission !== status) {
                Notification.permission = status;
            }
        });
    }

var button = document.getElementsByTagName('button')[0];

button.addEventListener('click', function() {
        var n = 1; //change this number and Notification tag parameter to see many notifications.
        // If the user agreed to get notified
        // Let's try to send ten notifications
        if (window.Notification && Notification.permission === "granted") {
            for (var i = 0; i < n; i++) {
                // Thanks to the tag, we should only see the last notification
                var n = new Notification("Hi Dude #" + i + ", any question on Techbrood?", {
                    body: 'Best viewed in Chrome, Do not use IE!',
                    icon: '/assets/check.png',
                    tag: 'soManyNotification',
                });
            }
        }

// If the user hasn't told if he wants to be notified or not
        // Note: because of Chrome, we are not sure the permission property
        // is set, therefore it's unsafe to check for the "default" value.
        else if (window.Notification && Notification.permission !== "denied") {
            Notification.requestPermission(function(status) {
                if (Notification.permission !== status) {
                    Notification.permission = status;
                }

// If the user said okay
                if (status === "granted") {
                    for (var i = 0; i < n; i++) {
                        // Thanks to the tag, we should only see the last notification
                        var n = new Notification("Hi Dude #" + i + ", any question on Techbrood?", {
                            body: 'Best viewed in Chrome, Do not use IE!',
                            icon: '/assets/check.png',
                            tag: 'soManyNotification',
                        });
                    }
                }

// Otherwise, we can fallback to a regular modal alert
                else {
                    alert("Hi!");
                }
            });
        }

// If the user refuses to get notified
        else {
            // We can fallback to a regular modal alert
            alert("Hi!");
        }
    });
});

编译

CSS

HTML

创建Notifications对象，通过requestPermission征求用户对于网站通知的许可。使用tag参数避免多条通知，使用icon来设置图标通知，使用body来设置通知内容。

notifications

编辑器支持Emmet

快捷键

创建Notifications对象，通过requestPermission征求用户对于网站通知的许可。使用tag参数避免多条通知，使用icon来设置图标通知，使用body来设置通知内容。

notifications

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：