在执行完以上代码后,我们就成功地创建了一个消息框实例,在Chrome下面它最终会显示成这样:
到这里我们已经成功了一半,但能不能正确地显示出这个消息框,最终还取决于用户的授权。鉴于浏览器的安全机制,只有用户同意网页弹出消息通知框,消息通知才能够真正的显示出来。所以现在我们要做的就是申请用户授权。
Notification类提供了一个requestPermission方法,用来请求用户授权,代码如下:
Notification.requestPermission(function (permission) {
console.log(permission);
popNotice();
});
温馨提示:用户一旦没有授权,拒绝,以上方法将不再执行!
示例demo
桌面消息// 判断是否支持Notification
if (window.Notification) {
//Notification 方法
var popNotice = function () {
var notification = new Notification("Hi,帅哥:", {
body: '可以加你为好友吗?', //显示消息的内容
icon: 'http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg' //显示消息的缩略图
});
//消息框被点击时被调用
//可以打开相关的视图,同时关闭该消息框等操作
notification.onclick = function () {
notification.close();
};
//5秒后关闭消息框
notification.onshow = function () {
setTimeout(function () {
notification.close();
}, 5000);
};
};
if (Notification.permission == "granted") { //授权
popNotice();
} else if (Notification.permission != "denied") { //没有授权时询问
Notification.requestPermission(function (permission) {
console.log(permission);
popNotice();
});
}
} else {
alert('浏览器不支持Notification');
}
html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...
第二季第八天 HTML5新特性
在函数内部window.a = a 在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...
HTML5新特性 websocket(重点)--多对多聊天室
一.html5新特性 websocket(重点)--多对多聊天室 HTTP:超文本传输协议 HTTP作用:传输网页中资源(html;css;js;image;video;..) HTTP是浏览器搬运 ...
html5新特性
这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...
转: HTML5新特性之Mutation Observer
转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...
HTML5新特性之CSS+HTML5实例
1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. 同时字符集声明也被简化了:
HTML5新特性:FileReader 和 FormData
连接在这里: HTML5新特性:FileReader 和 FormData
web全栈架构师[笔记] — 03 html5新特性
HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...
HTML5新特性:范围样式
原文出处:http://blog.csdn.net/hfahe/article/details/7381141 Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...
随机推荐
CFD冲蚀模拟的一些理论
[TOC] 在CFD中计算颗粒对固体壁面的冲蚀往往采用冲蚀模型(Erosion Model). 1 冲蚀速率(Erosion Rate) 冲蚀速率定义为壁面材料在单位时间单位面积上损失的质量(单位:\ ...
43. Merge Sorted Array &;&; LRU Cache
Merge Sorted Array OJ: https://oj.leetcode.com/problems/merge-sorted-array/ Given two sorted integer ...
Server Develop (六) Linux epoll总结
Linux epoll epoll是Kernel 2.6后新加入的事件机制,在高并发条件下,远优于select.epoll最大的好处在于它不会随着监听fd数目的增长而降低效率.因为在内核中的sele ...
PHP 图片文件上传代码
通过 PHP,可以把文件上传到服务器.里面加入一些图片的判断,如果不加判断文件的类型就可以上传任意格式的文件. 为了网站的安全,肯定不让上传php文件,如果有人进入你的后台,上传了一个php文件,你的 ...
Flesch Reading Ease(模拟)
http://poj.org/problem?id=3371 终于遇到简单一点的模拟题了.不过本人真心没有耐心读题目... 它的大致意思就是给一段合法的文章,求出这段文章的单词数,句子数,音节数,按照 ...
Raspberry 3安装docker
SD卡制作 准备一张4GB或者以上的micro sd卡,下载系统镜像,例如raspbian-jessie-lite.img,并使用刷机工具,如Pi filler将其写入sd卡,当然也可以使用命令行的d ...
[Swift]LeetCode438. 找到字符串中所有字母异位词 | Find All Anagrams in a String
Given a string s and a non-empty string p, find all the start indices of p's anagrams in s. Strings ...
Django content_type 简介及其应用
在网上看到 django ORM 有一个 content_type 字段表的应用,这张表不是我们通过建立model类添加的,而是django自动帮我们生成的,具体的作用先简单的举个例子给大家介绍一下. ...
[转]Explorer.exe的命令行参数
本文来自:Explorer.exe的命令行参数 摘要 本文讲述explorer.exe(资源管理器)的命令行. 语法 EXPLORER.EXE [/n][/e][,/root,