HTML代码:
<button id="button">有人想加你为好友</button>
<p id="text"></p>
JS代码:
if (window.Notification) {
var button = document.getElementById('button'), text = document.getElementById('text'); var popNotice = function() {
if (Notification.permission == "granted") {
var notification = new Notification("Hi,帅哥:", {
body: '可以加你为好友吗?',
icon: '//image.zhangxinxu.com/image/study/s/s128/mm1.jpg'
}); notification.onclick = function() {
text.innerHTML = '张小姐已于' + new Date().toTimeString().split(' ')[0] + '加你为好友!';
notification.close();
};
}
}; button.onclick = function() {
if (Notification.permission == "granted") {
popNotice();
} else if (Notification.permission != "denied") {
Notification.requestPermission(function (permission) {
popNotice();
});
}
};
} else {
alert('浏览器不支持Notification');
}

浏览器通知Web Notifications实例页面的更多相关文章

  1. HTML5桌面通知(Web Notifications)实例解析

    先上一段代码,ie不支持,Chrome.fireFox.Opera支持 <!DOCTYPE html> <html> <head> <meta http-eq ...

  2. HTML5开启浏览器桌面通知 Web Notification

    说明: 1.Chrome要求必须https才可以开启浏览器通知 2.显示图片在本服务器,不支持跨越 3.自定义声音Chrome不播放,Firefox正常播放 代码如下: <!-- /** * @ ...

  3. notification(浏览器通知)

    一.notification简介 Web Notifications是HTML5 的一个特性,目前我知道的有谷歌浏览器和windows edge对它进行了支持,用于向用户配置和显示桌面通知. 二.no ...

  4. 在Autodesk应用程序商店发布基于浏览器的Web应用程序

    你一定已经听说过Autodesk应用程序商店了,通过Autodesk应用程序商店,你可以免费下载或购买来自全球的优秀开发者发布的应用程序,来帮助你更快更方便的完成你的工作.而且作为开发者,您也可以在A ...

  5. 浏览器通知--window.Notification

    参考链接:http://blog.csdn.net/guoquanyou/article/details/51726571 Web Notifications是HTML5 的一个特性,目前我知道的有谷 ...

  6. HTML5 Web Notifications 桌面推送小记

    目录 简介 常用API 手动设置权限 简介 Web Notifications目前在w3c的协议中已经是"推荐"(REC:Recommendation)阶段,除了iE外,各大现代浏 ...

  7. 【web性能】页面呈现、重绘、回流

    在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类 ...

  8. 浏览器输入URL到响应页面的全过程

    B/S网络架构从前端到后端都得到了简化,都基于统一的应用层协议HTTP来交互数据,HTTP协议采用无状态的短链接的通信方式,通常情况下,一次请求就完成了一次数据交互,通常也对应一个业务逻辑,然后这次通 ...

  9. 【ASP.NET Core】EF Core - “影子属性” 深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 1

    [ASP.NET Core]EF Core - “影子属性”   有朋友说老周近来博客更新较慢,确实有些慢,因为有些 bug 要研究,另外就是老周把部分内容转到直播上面,所以写博客的内容减少了一点. ...

随机推荐

  1. Linux 软链接 硬链接 ln命令(简约说明版)

    注意:路径使用绝对路径!! 解决方法: 当我们需要在不同的目录下用到同一个文件时,会用到以下命令. 命令:ln 作用:为某一个文件在另外一个位置建立一个同步的链接 语法:ln [option] 源文件 ...

  2. Ruby  String类

    String类 更新: 2017/06/10 更新: 2017/06/23 puts()要空格可以直接不加参数 更新: 2017/08/17 增加rails引入的titleize 更新: 2017/1 ...

  3. Code:Blocks 中文乱码问题原因分析和解决方法

    下面说说修改的地方. 1.修改源文件保存编码在:settings->Editor->gernal settings 看到右边的Encoding group Box了吗?如下图所示: Use ...

  4. Kubernetes集群认证

    1.集群搭建:https://www.kubernetes.org.cn/3808.html 2.集群验证:https://www.kubernetes.org.cn/1861.html

  5. [SRM613~] TaroCheckers

    一定要注意Topcoder的提交机制 Links: 原题地址 Vjudge Solution 这道题思维比较巧妙. 一看就基本知道是一个Dp题. 首先转换一下,用列而不是行来设第一维的状态,因为每列只 ...

  6. [CTSC2000]丘比特的烦恼

    Description 随着社会的不断发展,人与人之间的感情越来越功利化.最近,爱神丘比特发现,爱情也已不再是完全纯洁的了.这使得丘比特很是苦恼,他越来越难找到合适的男女,并向他们射去丘比特之箭.于是 ...

  7. Bryce1010的微机接口课设

    8086CPU知识回顾 8086 CPU 中寄存器总共为 14 个,且均为 16 位 . 即 AX,BX,CX,DX,SP,BP,SI,DI,IP,FLAG,CS,DS,SS,ES 共 14 个. 而 ...

  8. 01背包 Codeforces Round #267 (Div. 2) C. George and Job

    题目传送门 /* 题意:选择k个m长的区间,使得总和最大 01背包:dp[i][j] 表示在i的位置选或不选[i-m+1, i]这个区间,当它是第j个区间. 01背包思想,状态转移方程:dp[i][j ...

  9. 题解报告:hdu 1408 盐水的故事

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1408 Problem Description 挂盐水的时候,如果滴起来有规律,先是滴一滴,停一下:然后 ...

  10. C# 基础知识和VS2010的小技巧总汇(2)[转]

    1.使用关键字readonly ,表示这个字段只能在执行构造函数的过程中赋值,或者由初始化语句赋值 2..net4.0新增一个  Tuple 类,代表一个有序的N元组.可以调用Tuple.Create ...