html5 浏览器消息通知（Notification）

设置允许浏览器通知（仅支持https）：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>tip</title><script type="text/javascript" src="js/jquery-1.11.3.min.js"></script><style>* {margin: 0; padding: 0;}body, html {width: 100%; height: 100%;}</style>
</head>
<body><button id="tip1" class="tip1">显示通知</button><script>;$(function() {var timer = null,title = $('title').text();$('#tip1').on('click', function() {showMsgNotification('title', 'msg');return false;});$('body').on('click', function() {clearInterval(timer);$('title').text(title);});function showMsgNotification(title, msg) {var Notification = window.Notification || window.mozNotification || window.webkitNotification;if(Notification) {//支持桌面通知if(Notification.permission == "granted") {//已经允许通知var instance = new Notification(title, {body: msg,icon: "images/reload.png",});instance.onclick = function() {$('body').css({'background': 'red'});console.log('onclick');instance.close();};instance.onerror = function() {console.log('onerror');};instance.onshow = function() {console.log('onshow');};instance.onclose = function() {console.log('onclose');};}else {//第一次询问或已经禁止通知(如果用户之前已经禁止显示通知，那么浏览器不会再次询问用户的意见，Notification.requestPermission()方法无效)Notification.requestPermission(function(status) {if (status === "granted") {//用户允许var instance = new Notification(title, {body: msg,icon: "images/reload.png"});instance.onclick = function() {// Something to do};instance.onerror = function() {// Something to do};instance.onshow = function() {// Something to do};instance.onclose = function() {// Something to do};}else {//用户禁止return false}});}}else {//不支持(IE等)var index = 0;    clearInterval(timer);timer = setInterval(function() {if(index%2) {$('title').text('【　　　】'+ title);//这里是中文全角空格，其他不行}else {$('title').text('【新消息】'+ title);}index++;if(index > 20) {clearInterval(timer);}}, 500);}}});</script>
</body>
</html>

html5 浏览器消息通知（Notification）相关推荐

html 消息通知功能,HTML5之消息通知的使用(Web Notification)
关于 HTML5 ,写了不少文章,总觉得相关的高级 API 都得过一遍.系统的了解,站在更高的高度去思考问题,这样才能事半功倍. 一.先睹为快我们先来尝试一个最简单的例子,打开 chrome 开发者 ...
html在线消息,HTML5之消息通知的使用(Web Notification)
关于 HTML5 ,写了不少文章,总觉得相关的高级 API 都得过一遍.系统的了解,站在更高的高度去思考问题,这样才能事半功倍. 一.先睹为快我们先来尝试一个最简单的例子,打开 chrome 开发者 ...
js浏览器消息通知接口Notification
注意:需要依赖前端服务启动时才生效!!! 注意:需要依赖前端服务启动时才生效!!! 注意:需要依赖前端服务启动时才生效!!! HTML: <el-button type="primar ...
html5的消息通知
这里介绍一个HTML5的notification demo: <!DOCTYPE html> <html><head><meta charset=" ...
【VUE】浏览器消息通知（声音提醒，标题栏闪动，弹框提醒）
思路: 浏览器通知使用Notification,详情可查看Notification.Notification() 标题栏闪动利用循环实现声音提醒可以使用播放本地音频实现总结:在当前页面接收到消息时 ...
js 浏览器桌面通知notification
Notification是HTML5新增的API,用于向用户配置和显示桌面通知.上次在别的网站上看到别人的通知弹窗,好奇之余也想知道如何实现的.实际去查一下发现并不复杂,且可以说比较简单,故写篇博客分 ...
Android开发短信拦截与读取，消息通知Notification
截获系统广播,读取消息,若联系人存在于通信录中,则让消息继续传播:若属于陌生号码,则中断消息,同时把信息显示在自己的程序中. 拦截器代码如下: public class SMSInterceptRec ...
html5桌面通知自动关闭时间,H5 notification浏览器桌面通知
Notification是HTML5新增的API,用于向用户配置和显示桌面通知.上次在别的网站上看到别人的通知弹窗,好奇之余也想知道如何实现的.实际去查一下发现并不复杂,且可以说比较简单,故写篇博客分 ...
HTML5中的Web Notification桌面通知(右下角提示)
html5桌面通知(Web Notifications)对于需要实现在新消息入线时,有桌面通知效果的情况下非常有用,在此简单介绍一下这个html5的新属性.通过Web Notifications(桌面 ...
【HTML】HTML5中的Web Notification桌面通知
大家在做一些浏览器端的聊天功能的时候,或者在一些网站跟在线客服咨询的时候,会看到一些消息通知的提示,常见的有浏览器标签页的闪烁和屏幕右侧的消息通知.这里简单的介绍一下如何实现这样的功能. 1.实现标签 ...

html5 浏览器消息通知（Notification）

html5 浏览器消息通知（Notification）相关推荐

最新文章

热门文章