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 读取Excel 文件内容

    在一个项目中,有一个需求,是把excel文件的内容转换为xml格式展示.在学习如何操作的过程中,首先是如何获取excel文件,其中操作的代码如下: 1.首先是导入需要的 jar, 下载地址:https ...

  2. linux下外接显示器亮度调节

    下载Brightness Controller 即可调节. 还可以通过如下命令: 使用xrandr | grep -v disconnected | grep connected命令查看连接的显示设备 ...

  3. 九：python 对象类型详解五：元组

    一:元组: 1,简单介绍:元组由简单的对象组构成.元组与列表非常类似,只不过元组不能在原处修改(它们)是不可变的,并且通常写成圆括号中的一系列项.虽然元组不支持任何方法调用,但元组具有列表的大多数属性 ...

  4. nagios维护之添加监控

    查看修改的配置是否有误: /usr/local/nagios/bin/nagios -v /usr/local/nagios/etc/nagios.cfg 一.nagios监控交换机 编辑 /usr/ ...

  5. WAS 常见报错

    1) An error occurred while deleting the server. ADMG0011E: An unexpected exception occurred com.ibm. ...

  6. CTF题-http://120.24.86.145:8002/flagphp/：Bugku----flag.php

    今天做了一道关于序列化的题目,收益颇多,愉快地开始. 首先,提示了“hint”,所以尝试加入hint参数.这儿没啥好说的,最后hint=1显示了重点内容.如下图所示 没错,是金灿灿的网页代码,开心,仔 ...

  7. UVa 548 Tree(二叉树最短路径)

    You are to determine the value of the leaf node in a given binary tree that is the terminal node of ...

  8. [剑指Offer]34-二叉树中和为某一值的路径

    题目链接 https://www.nowcoder.com/practice/b736e784e3e34731af99065031301bca?tpId=13&tqId=11177&t ...

  9. 单击Gridview中LinkButton,获取当前行索引及某单元格值，进行相关处理

    1.在Gridview中添加模板列,在其中加入Linkbuttion,增加CommandName属性 (设置命令名),并赋值 <asp:TemplateField HeaderText=&quo ...

  10. swift - view的指定位置切圆角

    1. extension UIView{ func addCorner(conrners: UIRectCorner , radius: CGFloat) { let maskPath = UIBez ...