1. <script>
  2. function showNotice(title,msg){
  3. var Notification = window.Notification || window.mozNotification || window.webkitNotification;
  4. if(Notification){
  5. Notification.requestPermission(function(status){
  6. //status默认值'default'等同于拒绝 'denied' 意味着用户不想要通知 'granted'意味着用户同意启用通知
  7. if("granted" != status){
  8. return;
  9. }else{
  10. var tag = "sds"+Math.random();
  11. var notify = new Notification(
  12. title,
  13. {
  14. dir:'auto',
  15. lang:'zh-CN',
  16. tag:tag,//实例化的notification的id
  17. icon:'域名/favicon.ico', //通知的缩略图,//icon 支持ico、png、jpg、jpeg格式
  18. body:msg //通知的具体内容
  19. }
  20. );
  21. notify.onclick=function(){
  22. //如果通知消息被点击,通知窗口将被激活
  23. window.focus();
  24. },
  25. notify.onerror = function () {
  26. console.log("HTML5桌面消息出错!!!");
  27. };
  28. notify.onshow = function () {
  29. setTimeout(function(){
  30. notify.close();
  31. },)
  32. };
  33. notify.onclose = function () {
  34. console.log("HTML5桌面消息关闭!!!");
  35. };
  36. }
  37. });
  38. }else{
  39. console.log("您的浏览器不支持桌面消息");
  40. }
  41. };
  1. showNotice("您有新的通知","<span></span>很可惜这里不能添加html代码,只能是纯文本);
  1. </script>

Notification.requestPermission  该方法将向用户请求询问显示提示框的权限。返回值有三个:

  1. default //默认
  2. granted //允许
  3. denied //拒绝
  1. var notify = new Notification(title,options) 构造函数,两个参数为title(标题,可设为空,则不显示标题),options为一个对象,有以下几个属性:
  1. dir(文字方向,经测试都不支持)
  2. lang(语言)
  3. body(消息体)
  4. tag(标签)
  5. icon(icon地址)
  1. Notification对象还有四个事件:分别在消息显示、被点击、被关闭和出错的时候被触发
  1. onshow()
    onclick()
    onclose()
    onerror()

HTML 5 桌面提醒的更多相关文章

  1. Matlab与Windows桌面提醒

    最近在实验室用Matlab做实验,一次训练下来最少得也得5到10分钟吧.在Matlab运行的过程中,又不太好去做别的事情,因为5到10分钟的时间实在有点短.但是,眼睁睁看着代码的运行的话,5分钟又实在 ...

  2. html5 notification桌面提醒功能

    html5 notification桌面提醒功能 <!DOCTYPE html> <html lang="en"> <head> <met ...

  3. Web程序的桌面提醒

    做web开发常会面对的一个问题是,浏览器最小化的时候如何才能向用户发送通知.解决办法大概有三种:让用户有事没事儿搂两眼页面:开发一个桌面客户端:Html5的Notification API. 目前没看 ...

  4. 淘宝付邮试用Chrome桌面提醒插件(含源码)

    淘宝付邮试用每天都会推出10元邮费试用的商品,有些对自己还是有用的.试用一下还不错,关键是便宜.不过,有些商家也抓住了买家贪便宜的特点,推出廉价垃圾商品.这里,大家还是慧眼识别了.每天浏览这些商品会很 ...

  5. 谷歌chrome浏览器桌面提醒 webkitNotifications

    原创: //点击时开启提醒 $(".message_alert").toggle(function(){ $(".message_alert_tip").htm ...

  6. 使用 notify.js 桌面提醒

    //var iN = new iNotify({ // effect: 'flash', // interval: 500, // message: "有消息拉!", // aud ...

  7. 使用 Notification API 开启浏览器桌面提醒

    Notifications API 允许网页控制向最终用户显示系统通知 —这些都在顶级浏览上下文视口之外,因此即使用户已经切换标签页或移动到不同的应用程序,也可以显示.该API被设计成与不同平台上的现 ...

  8. javascript-浏览器消息提醒

    如何让用户在浏览器最小化的状态下也能及时的收到消息提醒呢? 这个问题作为webRd是要正面面对的. 大约可分两种场景:一种是类似桌面通知的形式还有一种是类似QQ提醒(在系统任务栏闪烁随后高亮);接下来 ...

  9. wpf 客户端【JDAgent桌面助手】业余开发的终于完工了。。晒晒截图

    目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]详解(一)主窗口 圆形菜单... wpf 客 ...

随机推荐

  1. 深入剖析SolrCloud(三)

    作者:洞庭散人 出处:http://phinecos.cnblogs.com/ 本博客遵从Creative Commons Attribution 3.0 License,若用于非商业目的,您可以自由 ...

  2. 如何查询centos、Debian服务器、查看系统内核版本,系统版本,32位还是64位

    查看centos内核的版本: 1)[root@localhost ~]# cat /proc/version Linux version 2.6.18-194.el5 (mockbuild@build ...

  3. jquery中的cookie使用

    一.检测cookie是否启用 通过navigator.cookieEnabled这个属性实现,若该值为true,则当前cookie是启用的,反之是禁用的,注意:此属性不是一个标准的属性 二.cooki ...

  4. Python 安装urllib3

    一.系统环境 操作系统:Win10 64位 Python版本:Python 3.7.0 二.报错信息 No module named 'urllib3' 三.安装参考 1.参照网上的安装方法通过pip ...

  5. JavaScript——Dom编程(2)

    ①.创建一个元素节点: var reference = document.createElement(element) createElement(): 按照给定的标签名创建一个新的元素节点. 方法只 ...

  6. 远程访问Function时报错Remote table-valued function calls are not allowed.

    开始是这样调用的:select * from [LinkedServer].[db name].dbo.[function name](param1, param2) 原因: Only table-v ...

  7. yum 安装telnet

    检测是否安装 rpm -qa |grep telnet 安装 yum install xinetd yum install telnet-server yum -y install telnet 再次 ...

  8. 国外物联网平台(8):Telit

    国外物联网平台(8) ——Telit 马智 定位 We Bring IoT to Life Telit提供世界上最全面的高性能物联网模块.连接服务和软件. 产品体系 模块 Telit提供丰富专业的物联 ...

  9. SxsTrace使用的方法

    Windows7平台上有一个强大的SxsTrace工具,可以跟踪调试应用程序运行时需要的动态库的版本和路径.   SxsTrace使用的方法:   1.首先必须以Administrator用户身份登录 ...

  10. hbuilder h5 原生socket

    在网上搜索了很多资料都不行,要么就是不能发送数据,要么就不能接收数据,使用如下的方法可以接收数据,一个一个字节接收: 有部分限制是需要明确知道要接收多少个字节,否则容易出现接收异常.. var tes ...