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. Ambient Light

    [Ambient Light] Ambient light is light that is present all around the scene and doesn’t come from an ...

  2. idea 安装和破解

    https://blog.csdn.net/SmileLvCha/article/details/78936659

  3. 破解webstorm

    补丁下载链接:http://idea.lanyus.com/ 第一步:将补丁复制到安装目录的bin目录下 第二步:修改同目录下的 WebStorm.exe.vmoptions 和WebStorm64. ...

  4. cxf怎样提高webservice性能，及访问速度调优

    性能: 1. 启用FastInfoset(快速信息集)webservice的性能实在是不敢恭维.曾经因为webservice吞吐量上不去,对webservice进行了一些性能方面的优化,采用了Fast ...

  5. PHPActiveRecord 学习二

    ORM关联查询 a.一对多 针对外键来说 谁属于谁 谁有谁 user表 CREATE TABLE `user` ( `uid` int(11) NOT NULL AUTO_INCREMENT, `na ...

  6. as2.0 清除主时间轴上所有的影片简介

    for (var i in _root) { if (typeof _root[i] == "movieclip") { _root[i].swapDepths(1); _root ...

  7. pta l2-10（排座位）

    题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805066135879680 题意:给宴席排座位,有n个人,m个 ...

  8. ceph 维护之 osd节点添加

    一.目标 添加一台新osd 节点,主机名ceph6 到 ceph 集群.public IP:10.6.32.25      cluster_network :10.6.33.25 二.基础环境配置 1 ...

  9. Sigma Function (平方数与平方数*2的约数和是奇数)

    Sigma Function https://vjudge.net/contest/288520#problem/D Sigma function is an interesting function ...

  10. 多线程通信(wait和notify)

    线程通信概念: 线程是操作系统中独立的个体,但这些个体如果不经过特殊的处理就不能成为一个整体,线程间的通信就成为整体的必用方式之一.当线程存在通信指挥,系统间的交互性会更强大,在提高CPU利用率的同时 ...