HTML5 Notification

最新推荐文章于 2023-06-21 16:07:03 发布

转载最新推荐文章于 2023-06-21 16:07:03 发布 · 95 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/moyan03/p/5695166.html

文章标签：

#php

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>提示</title>
    <style>
        
    </style>
</head>
<body>
    <button onclick="alterNotification()">弹出提示</button>
    <label id="note"></label>
</body>
<script>
    window.onload = function () {
        if(!window.Notification){
            alert("浏览器不支持Notification");
        }
    };

    function alterNotification() {
        // 只会是granted, denied, 或default.
        // 其中granted表示用户允许通知，denied表示用户嫌弃你，default表示用户目前还没有管你。
        if (Notification.permission != "granted") {
            Notification.requestPermission(function (permission) {
                if (permission == "denied") {
                    alert("用户未同意弹窗。");
                    return;
                }
            });
        }

        var notice = new Notification("通知", {
            body: "Content",
            icon: "image/webwxgeticon.jpg"
        });

        notice.onclick = function () {
            document.getElementById("note").innerHTML = "已成功通知";
        };
    }
</script>
</html>