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. 转载:Eclipse build Android时不生成apk问题解决方法

    Eclisps有时build后不生成apk.没有对Eclise做过设置调整,android工程代码也是没有问题的.反正就是莫名奇妙的遇到两次,解决方法如下: 1. 设置:Preferences -&g ...

  2. 查询及删除重复记录的SQL语句

    1.查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断 select * from people where peopleId in (select peopleId from ...

  3. HDU1254:推箱子(bfs+dfs)

    传送门 题意 给出一副图 0.空地1.墙2.箱子3.目的地4.人所在的位置 问最少几步能将箱子推到目的地 分析 这道题难度略大(菜鸡),首先用vis[bx][by][mx][my]记录当箱子(bx,b ...

  4. A+B Problem——经典中的经典

    A+B Problem,这道题,吸收了天地的精华,是当之无愧的经典中的经典中的经典.自古以来OIer都会经过它的历练(这不是白说吗?),下面就有我herobrine来讲讲这道题的各种做法. 好吧,同志 ...

  5. php安装的扩展php -m可以看到,但是phpinfo()看不到,php-fpm关闭了重新打开还是不行?

    问答 问答详情   php安装的扩展php -m可以看到,但是phpinfo()看不到,php-fpm关闭了重新打开还是不行? centos apache linux html php 3.2k 次浏 ...

  6. Poj 3189 Steady Cow Assignment (多重匹配)

    题目链接: Poj 3189 Steady Cow Assignment 题目描述: 有n头奶牛,m个棚,每个奶牛对每个棚都有一个喜爱程度.当然啦,棚子也是有脾气的,并不是奶牛想住进来就住进来,超出棚 ...

  7. 16-1 WEB存储基本操作

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. APP增量更新

    增量更新的概念: 当我们手机上安装的app版本与服务器的最新版本不一致的时候,传统做法是重新下载安装一个最新版的apk文件,不过这种方式比较耗流量,不利于用户体验.增量更新就是只下载当前app版本与最 ...

  9. 为OS X开发者准备的15个超棒应用

    几乎所有的开发人员在他们日常的开发工作中都有他们自己不可缺少的工具或实用程序集. 这些工具中的每一个都提供了特定的功能,大多数开发者都已经将他们集成到了其工作流程中. 使用这些工具或实用程序不单单只是 ...

  10. 组合模式和php实现

    组合模式(有时候又叫做部分-整体模式): 将对象组合成树形结构以表示“部分整体”的层次结构.组合模式使得用户对单个对象和组合对象的使用具有一致性.它使我们树型结构的问题中,模糊了简单元素和复杂元素的概 ...