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. 执行SDK的aapt报错./aapt: /lib64/libc.so.6: version `GLIBC_2.14' not found (required by ./aapt)

    问题| 执行SDK下的aapt报错./aapt: /lib64/libc.so.6: version `GLIBC_2.14' not found (required by ./aapt)   ../ ...

  2. 用PLSQL Developer 查看连接因子 tnsnames.ora

    1 2

  3. JS的6种常见继承模式

    数天前在知乎看到有人阿里面试被问到这个问题,我来总结一下. 1. 原型链继承: function SuperType() { this.property = true; } SuperType.pro ...

  4. 树的子结构(python)

    题目描述 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) # -*- coding:utf-8 -*- # class TreeNode: # def __ ...

  5. VIM常见命令

    1.删除所有数据 进入到第1行按下d,然后输入G回车,此时内容被全部清除 2.替换 :s/vivian/sky/ 替换当前行第一个 vivian 为 sky:s/vivian/sky/g 替换当前行所 ...

  6. Jenkins安装部署（二）

    Jenkins配置 一.修改jenkins家目录 由于jenkins在启动个之后会默认将所有的构建应用在家目录中创建一遍,为了合理化服务器资源,重新定义jenkins家目录. 在tomcat的cata ...

  7. RxJS之转化操作符 ( Angular环境 )

    一 map操作符 类似于大家所熟知的 Array.prototype.map 方法,此操作符将投射函数应用于每个值 并且在输出 Observable 中发出投射后的结果. import { Compo ...

  8. Android Studio生成签名安装包（Generate Signed APK）

    一 打开构建对话框. 二 创建新的密钥库(key store) 可以选择已创建的密钥库,也可以选择创建新的密钥库. 创建完成后,自动导入. 三 选择签名类型. 如果不选,会提示错误. 这里将新旧两种签 ...

  9. php cli命令 自定义参数传递

    所有的PHP发行版,不论是编译自源代码的版本还是预创建的版本,都在默认情况下带有一个PHP可执行文件.这个可执行文件可以被用来运行命令行的PHP程序.要在你的系统上找到这个可执行文件,就要遵照下面的步 ...

  10. 《centos系列》ubuntu终端链接centos服务器

    首先你得知道centos的账户密码:如果你不知道可以直接在centos下使用root用户: passwd 用户名 直接更新用户的密码. 然后在ubuntu终端(前提是已经安装了ssh): ssh ad ...