浏览器通知Web Notifications实例页面
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实例页面的更多相关文章
- HTML5桌面通知(Web Notifications)实例解析
先上一段代码,ie不支持,Chrome.fireFox.Opera支持 <!DOCTYPE html> <html> <head> <meta http-eq ...
- HTML5开启浏览器桌面通知 Web Notification
说明: 1.Chrome要求必须https才可以开启浏览器通知 2.显示图片在本服务器,不支持跨越 3.自定义声音Chrome不播放,Firefox正常播放 代码如下: <!-- /** * @ ...
- notification(浏览器通知)
一.notification简介 Web Notifications是HTML5 的一个特性,目前我知道的有谷歌浏览器和windows edge对它进行了支持,用于向用户配置和显示桌面通知. 二.no ...
- 在Autodesk应用程序商店发布基于浏览器的Web应用程序
你一定已经听说过Autodesk应用程序商店了,通过Autodesk应用程序商店,你可以免费下载或购买来自全球的优秀开发者发布的应用程序,来帮助你更快更方便的完成你的工作.而且作为开发者,您也可以在A ...
- 浏览器通知--window.Notification
参考链接:http://blog.csdn.net/guoquanyou/article/details/51726571 Web Notifications是HTML5 的一个特性,目前我知道的有谷 ...
- HTML5 Web Notifications 桌面推送小记
目录 简介 常用API 手动设置权限 简介 Web Notifications目前在w3c的协议中已经是"推荐"(REC:Recommendation)阶段,除了iE外,各大现代浏 ...
- 【web性能】页面呈现、重绘、回流
在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类 ...
- 浏览器输入URL到响应页面的全过程
B/S网络架构从前端到后端都得到了简化,都基于统一的应用层协议HTTP来交互数据,HTTP协议采用无状态的短链接的通信方式,通常情况下,一次请求就完成了一次数据交互,通常也对应一个业务逻辑,然后这次通 ...
- 【ASP.NET Core】EF Core - “影子属性” 深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 1
[ASP.NET Core]EF Core - “影子属性” 有朋友说老周近来博客更新较慢,确实有些慢,因为有些 bug 要研究,另外就是老周把部分内容转到直播上面,所以写博客的内容减少了一点. ...
随机推荐
- C#基础第一天 VS2013基本设置
1 .net能干什么 桌面应用程序 winform internet应用程序 Asp.net->京东.msdn.招聘银行 手机开发 wp8 unity3D游戏开发或者虚拟现实 2 .net两种交 ...
- Visual Studio一些插件
让JavaScript像C#一样支持Region http://www.cnblogs.com/codealone/p/3647127.html
- 【WIP】rails redis的使用
创建: 2018/03/17 [任务表]TODO 注: mac版 %开头表示命令行命令 安装 安装 % brew install redis 确认版本 % redis-server --ver ...
- bzoj 3196 Tyvj 1730 二逼平衡树【线段树 套 splay】
四舍五入就是个暴力. 对于线段树的每个区间都开一棵按权值排序的splay 对于第二个操作,二分一下,每次查询mid的排名,复杂度 $ O(nlog(n)^{3}) $ 其余的操作都是$ O(nlog( ...
- Noip2014生活大爆炸版石头剪刀布【水模拟】
模拟暴力也要优雅. https://www.luogu.org/problemnew/show/P1328 像我这种蒟蒻就会敲无数个ifelse qaq. 可以优雅地进行预处理一下. 膜法真是好东西q ...
- ROS学习笔记十:URDF详解
Unified Robot Description Format,简称为URDF(标准化机器人描述格式),是一种用于描述机器人及其部分结构.关节.自由度等的XML格式文件. 一.URDF语法规范 参见 ...
- 数论(GCD) HDOJ 4320 Arcane Numbers 1
题目传送门 题意:有一个A进制的有限小数,问能否转换成B进制的有限小数 分析:0.123在A进制下表示成:1/A + 2/(A^2) + 3 / (A^3),转换成B进制就是不断的乘B直到为0,即(1 ...
- Service官方教程(5)后台服务发送通知、把服务变前台服务。
1.Sending Notifications to the User (发送通知) Once running, a service can notify the user of events usi ...
- 关于python2.7的md5加密遇到的问题(TypeError: Unicode-objects must be encoded before hashing)
https://blog.csdn.net/u012087740/article/details/48439559 import hashlib import sys def md5s(): m=ha ...
- VS项目属性配置总结
以下是针对VS2013下的VC++项目: Debug和Release说明: Debug 通常称为调试版本,它包含调试信息,并且不作任何优化,便于程序员调试程序.Release 称为发布版本,它往往是进 ...