• HTML5中的Web Notification桌面右下角通知功能的实现


    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>
    

      

    实现效果:

     

  • 相关阅读:
    9.27作业
    9.20作业
    9.13作业
    9.6作业
    localstorage,sessionstorage使用
    oracle 客户端重新安装遇到的问题
    HTML5学习笔记(<command>,<details>,<dialog>)
    HTML5学习笔记(HTML5新标签<bdi>)
    html5学习笔记(html5新标签<aside>)
    html5学习笔记(html5新标签<article>)
  • 原文地址:https://www.cnblogs.com/feifeifeisir/p/13723222.html
Copyright © 2020-2023  润新知