zoukankan      html  css  js  c++  java
  • 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>
    
    

    实现效果:


    注:

    原文作者:祈澈姑娘技术博客:https://www.jianshu.com/u/05f416aefbe1
    90后前端妹子,爱编程,爱运营,爱折腾。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

    关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源300G干货大全。

    公众号回复“1”,拉你进程序员技术讨论群.


  • 相关阅读:
    你了解幻读吗?
    http面试准备
    DNS域名解析过程,域名的认识
    ajax实现用户登陆,退出,java做后端
    serialize()与serializeArray()
    jquery中Json操作
    jquery字符串操作
    理解jQuery的$.extend与$.fn.extend
    HTML之间互相传参
    解决topjui中工具栏按钮删除刷新从属表
  • 原文地址:https://www.cnblogs.com/wangting888/p/9701205.html
Copyright © 2011-2022 走看看