html5 桌面消息,HTML5新特性[ Notifications ] 桌面消息

在执行完以上代码后，我们就成功地创建了一个消息框实例，在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的新特性:范围样式,又叫做&lt ...

随机推荐

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,