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. robotframework 随机选中下拉框中的值

    示例脚本: click element id=provinceName #点击地区 省 wait until element is enabled xpath=.//*[@id='provinceNa ...

  2. 视图模板中 使用boottstrap 将各表单字段排成一行

    如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,请向 <form> 标签添加 class .form-inline. <form class="for ...

  3. 使用root用户登录到AWS EC2服务器,上传文件到/var/www目录

    关键词 1.aws ec2中上传文件到/var/www目录(使用filezilla) 2.使用root用户登录aws ec2实例 上一篇随笔中记录了在aws ec2实例中部署apache服务器的过程, ...

  4. Codeforces Round #409(Div.2)

    传送门 题意 A.询问最多改变一个字符的字符串"VK"子串数量 B.f(x,z)=y,给出x,y,求z For example, f("ab", "b ...

  5. Excel学习 -- 函数基础

    Excel函数基础 1. 单元格是函数的作用对象:    2. 函数由等号.函数表达式.操作符.参数.返回值五部分组成:    3. 商业智能报表中使用的常用函数分类:数学函数.文本函数.逻辑函数.查 ...

  6. 版本管理工具 Git

    Git是目前世界上最先进的分布式版本控制系统(没有之一). 文章参考来源: https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248 ...

  7. 从Oracle9i RMAN全库备份迁移到 Oracle10g

    1. 创建以下目录: mkdir -pv $ORACLE_BASE/admin/$ORACLE_SID/{{a,b,c,dp,u}dump,pfile} mkdir -pv $ORACLE_BASE/ ...

  8. [CF997E] Good SubSegment

    Description Transmission Gate 给你一个长度为n的排列P,定义一段子区间是好的,当且仅当这个子区间内的值构成了连续的一段.例如对于排列\(\{1,3,2\}\),\([1, ...

  9. HTTP/0.9、HTTP/1.0、HTTP/1.1、HTTP/2 历史演变和设计思路(详)*

    HTTP 协议是互联网的基础协议,也是网页开发的必备知识,最新版本 HTTP/2 更是让它成为技术热点. 本文介绍 HTTP 协议的历史演变和设计思路. 一.HTTP/0.9 HTTP 是基于 TCP ...

  10. Zygote和System进程的启动过程、Android应用进程启动过程

    1.基本过程 init脚本的启动Zygote Zygote进程的启动 System进程的启动 Android应用进程启动过程 2.init脚本的启动 +------------+ +-------+ ...