Notification实例 - HTML5笔记

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript">
            Notification.requestPermission(function(status) {
                if (Notification.permission !== status) {
                    Notification.permission = status;
                }
            });
            window.addEventListener("load", function() {
                if (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 t = new Date().toLocaleString();
                    var options = {
                        dir: "ltr",
                        lang: "utf-8",
                        icon: "http://ihuster.com/static/avatar/m_default.png&quot;,
                        body: "你好呀，欢迎留言交流呀"
                    };
                    if (Notification && Notification.permission === "granted") {
                        var n = new Notification("HUSTecho: " + t, options);
                        n.onshow = function() {
                            console.log("You got me!");
                        };
                        n.onclick = function() {
                            alert("You clicked me!");
                            window.location = "/";
                        };
                        n.onclose = function() {
                            console.log("notification closed!");
                        };
                        n.onerror = function() {
                            console.log("An error accured");
                        }
                    } else if (Notification && Notification.permission !== "denied") {
                        Notification.requestPermission(function(status) {
                            if (Notification.permission !== status) {
                                Notification.permission = status;
                            }
                            if (status === "granted") {
                                for (var i = 0; i < 3; i++) {
                                    var n = new Notification("Hi! " + i, {
                                        tag: "Beyoung",
                                        icon: "http://ihuster.com/static/avatar/b_default.png&quot;,
                                        body: "你好呀，我是第" + i + "条消息啦！"
                                    });
                                }
                            }
                        });
                    } else {
                        alert("Hi!");
                    }
                });
            });
        </script>
    </head>
    <body>
        <button id="show_button" type="button">点我看效果</button>
    </body>
</html>