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>

HTML5中的Web Notification桌面通知(右下角提示)的更多相关文章

  1. 聊聊HTML5中的Web Notification桌面通知

    有的时候我们会在桌面右下角看到这样的提示: 这种桌面提示是HTML5新增的 Web Push Notifications 技术. Web Notifications 技术使页面可以发出通知,通知将被显 ...

  2. 简单了解HTML5中的Web Notification桌面通知

    原文:http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/ 需要注意的是,消息通知只有通过Web服务访问该页 ...

  3. HTML5中的Web Notification桌面通知

    大家在做一些浏览器端的聊天功能的时候,或者在一些网站跟在线客服咨询的时候,会看到一些消息通知的提示,常见的有浏览器标签页的闪烁和屏幕右侧的消息通知.本篇博客就在这里简单的介绍一下如何实现这样的功能. ...

  4. HTML5中的Web Workers

    https://www.cnblogs.com/yanan-boke/p/6954390.html https://segmentfault.com/a/1190000014938305 HTML5 ...

  5. html5中的Web Storage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...

  6. [html5] (Notification) 桌面通知

    前几天要做一个桌面通知的功能,翻查以前做的笔记,发现webkitNotifications这个已经不能用了,baidu了下,基本都是介绍webkitNotifications的,后来在SOF上找到答案 ...

  7. HTML5中的Web Worker技术

    为了让后台程序更好的执行,在HTML5中设计了Web Worker技术.Web Worker的产生主要是考虑到在HTML4中JavaScript Web程序都是以单线程的方式执行的,一旦前面的脚本花费 ...

  8. HTML5中的Web Worker

    什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面是不可响应的,直到脚本已完成. Web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.您 ...

  9. 在Eclipse中运行Web项目Jsp网页时提示端口被占用的解决办法：Several ports (8005, 8888, 8009) required by Tomcat v9.0 Server at localhost are already in use.

    问题: 在Eclipse中运行Web项目Jsp网页启动Tomcat时提示端口被占用: Several ports (8005, 8080, 8009) required by Tomcat v9.0 ...

随机推荐

  1. Java方法的重载和重写

    重载与重写对比:  重载: 权限修饰符(public private 默认):无关 方法名:重载的两个方法的方法名必须相同 形参的个数不同 形参的类型不同 三者至少满足一个 返回值类型: 重载与返回值 ...

  2. ORA-30926: 无法在源表中获得一组稳定的行ORA-06512: 在 "STG.FP_MO_SPLIT", line 1562 临时

  3. Oracle常用查看表结构命令(转)

    转自:http://www.cnblogs.com/qingsong-do/archive/2011/11/29/2267244.html 获取表: select table_name from us ...

  4. NDK环境搭建方法1

    1.新建NdkDemo工程 2.新建NdkJniUtils类,在内部声明native方法 3.引用 4.build项目,生成NdkDemo\app\build\intermediates\classe ...

  5. PUDN用户名与密码

    Pudn 用户名与密码 boumang8171    que2538  温馨提示:1.  95%的用户第一次登录不成功,都是因为在复制粘贴帐号和密码时,把空格也复制粘贴上了.2. 如果连续3次帐号或密 ...

  6. Dbutils 的JDBC链接

    最近实践周,再次用到了这个Apache的开源工具包就在次对着个方面进行了复习 1.JDBC的基本 操作姿势 2.JDBC的步骤是 1.添加驱动包 Class.forName("oracle. ...

  7. Unity3D游戏贪吃蛇大作战源码休闲益智手机小游戏完整项目

    <贪吃蛇大作战>一款休闲竞技游戏,不仅比拼手速,更考验玩家的策略. 视频演示: http://player.youku.com/player.php/sid/XMzc5ODA2Njg1Ng ...

  8. Mastering Unity 2D Game Development

    Mastering Unity 2D Game Development will give your game development skills a boost and help you begi ...

  9. C语言之栈区、堆区

    一 局部变量存放在栈区中,函数调用结束后释放内存空间. #include "stdio.h"; #include "stdlib.h"; int *getNum ...

  10. 【nlp】中文分词基础原则及正向最大匹配法、逆向最大匹配法、双向最大匹配法的分析

    分词算法设计中的几个基本原则: 1.颗粒度越大越好:用于进行语义分析的文本分词,要求分词结果的颗粒度越大,即单词的字数越多,所能表示的含义越确切,如:“公安局长”可以分为“公安 局长”.“公安局 长” ...