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. multi_compile

    [multi_compile]  Used to  compile the shader code multiple times with different preprocessor directi ...

  2. JMeter学习（十二）分布式部署（转载）

    转载自 http://www.cnblogs.com/yangxia-test Jmeter 是java 应用,对于CPU和内存的消耗比较大,因此,当需要模拟数以千计的并发用户时,使用单台机器模拟所有 ...

  3. shell 通过shift获得某位后的入参

    有时shell的入参个数不定,想要获得第2位后的参数,作为新的入参调用其他脚本   通常这时候想到的方法是用遍历,例如下面的方法: for (( i=2;i<=$#;i++)) do       ...

  4. ELK Deployed

    Enviroment prepare rpm -qa | grep java wget http://download.oracle.com/otn-pub/java/jdk/8u171-b11/51 ...

  5. ucore-lab1-练习3report

    练习3.分析bootload进入保护模式的过程 0. BIOS通过读取硬盘主引导扇区到内存,并跳转到对应内存中的位置,也就是从’%cs=0 $pc=0x7c00‘进入并执行bootloader,boo ...

  6. python中matplotlib所绘制的图包含了很多的对象

    上图中的top=‘off’意思是说顶部的grid lines 看不见. 去除frame,意思就是将这个矩形给去除掉,spine意思是脊柱 bars = plt.bar(pos, popularity, ...

  7. javascript简单的滑动效果

    利用setInterval实现简单的滑动效果 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  8. MYSQL之水平分区----MySQL partition分区I（5.1）

    一.        分区的概念 二.        为什么使用分区?(优点) 三.        分区类型 四.        子分区 五.        对分区进行修改(增加.删除.分解.合并) 六 ...

  9. mybatis BigDecimal Double Long 的坑爹事

    写接口的时候别用 public Map<String,Double> selectForRealRemainer(Orders orders); 用这样就行 public Map<S ...

  10. Windows Server RRAS 配置

    在Windows Server上,RRAS 是 Rounting and Remote Access Service 的简称. 通过 RRAS UI 管理器可实现 VPN 和 NAT 的配置. RRA ...