1.新/旧版本的chrome和firefox都可支持,IE下不支持因此设置为了在最小化窗口处闪烁显示提示文字。

2.设置为提示窗口显示5秒即关闭。

3.可设置图标和点击提示窗口要跳转到的页面(见输入参数)。

            var timer = null,
title = $('title').text(); $('body').on('click', function() {
clearInterval(timer);
$('title').text(title);
}); function showMsgNotification(title, msg , iconUrl ,clickUrl) {
var Notification = window.Notification || window.mozNotification || window.webkitNotification;
if (window.webkitNotifications) {
//chrome老版本
if (window.webkitNotifications.checkPermission() == 0) {
var notif = window.webkitNotifications.createNotification(iconUrl, title, msg);
notif.display = function() {
setTimeout(function() {
notif.close();
}, 5000);
}
notif.onerror = function() { }
notif.onclose = function() { }
notif.onclick = function() {
window.focus();
window.location.href = clickUrl;
}
notif.replaceId = 'Meteoric';
notif.show();
} else {
window.webkitNotifications.requestPermission($jy.notify);
}
}
else if(Notification) {//支持桌面通知
if(Notification.permission == "granted") {//已经允许通知
var instance = new Notification(title, {
body: msg,
icon: iconUrl
//renotify : true
}); instance.onclick = function() {
//$('body').css({'background': 'red'});
//console.log('onclick');
window.focus();
window.location.href = clickUrl;
//window.open(clickUrl, "_blank");
};
instance.onerror = function() {
//console.log('onerror');
};
instance.onshow = function() {
setTimeout(function() {
instance.close();
}, 5000);
};
instance.onclose = function() {
//console.log('onclose');
};
}else {//第一次询问或已经禁止通知(如果用户之前已经禁止显示通知,那么浏览器不会再次询问用户的意见,Notification.requestPermission()方法无效)
Notification.requestPermission(function(status) {
if (status === "granted") {//用户允许
var instance = new Notification(title, {
body: msg,
icon: iconUrl
}); instance.onclick = function() {
window.focus();
window.location.href = clickUrl;
};
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);
}
}

JavaScript 兼容新旧版chrome和firefox的桌面通知的更多相关文章

  1. (转)Resources和AssetBundle(新旧版)学习

    Resources:   Resources的缺点:1.与显示Inspector上直接引用相比,Resources使用不方便.     2.不管你Resources上的资源是否调用了,当你发布的时候, ...

  2. Arcgis API For IOS扩展AGSDynamicLayer新旧版API对比

    AGSDynamicLayer(ForSubclassEyesOnly) Category Reference Description This category organizes the meth ...

  3. Css3 兼容新旧浏览器

    想想10年前用 IE6,火狐,遨游,谷歌等浏览器学习css时,那叫一个艰苦,各种hack各种抓耳挠腮,不是margin塌陷就是元素飞了... 当前借着css3这个东风,如果各大浏览器厂商能统一一下,也 ...

  4. 兼容新旧浏览器的flex写法

    拷贝直接加类名即可 /* 定义 */ .flex-def { display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older W ...

  5. 下载旧版chrome

    问题描述: xp只能使用chrome 49及其之前的版本,去哪里下载? 解决办法: 1. 在这里 http://www.slimjet.com/chrome/google-chrome-old-ver ...

  6. 三、create-react-app新旧版中使用less和antd并修改主题颜色

    引入less 如果项目根目录中没有config文件夹,首先暴露出项目配置文件,项目下执行: npm run eject 如果项目是从git仓库中pull下来的的话,必须确保本地项目与仓库中没有冲突,才 ...

  7. 新旧版ubuntu镜像免费下载

    链接:https://pan.baidu.com/s/1hUNfiyA_Npj9QQ0vNLJ_Xw 密码:6k6i

  8. 最流行的JavaScript库jQuery不再支持旧版IE

    直到JQuery2.0的发布,流行的jQuery JavaScript库到了一个重要里程碑.2.0版本比前任版本在大小上缩减了12%,但是更大的新闻是,jQuery 2.0不在对IE6,7,8三个版本 ...

  9. Android技巧小结之新旧版本Notification

    最近开发用到了通知功能,但有几个地方老是提示deprecated,然后就找了篇文章学习了下新旧版本的不同. Notification即通知,用于在通知栏显示提示信息. 在较新的版本中(API leve ...

随机推荐

  1. 携程Apollo(阿波罗)配置中心的Java样例客户端启动和调试

    参考:https://github.com/ctripcorp/apollo/wiki/Apollo%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97#23-java%E6%A0 ...

  2. jenkinsapi出现HTTPConnectionPool Max retires exceeded异常

    python项目通过使用jenkinsapi远程控制jenkins jenkinsapi使用的远程连接方法是requests包,requests包又使用了urllib3,urllib3又引用了http ...

  3. Delphi 2007 的重构功能

    Move 移动 1.将选定的静态函数从一个类移动到另一个类 2.将选中的类或接口移动到其他单元 Extract Interface 抽取接口 将选定的函数抽取到一个新的接口中 Extract Supe ...

  4. REST API 安全设计

    REST API 安全设计 2017年04月27日 18:34:27 阅读数:1699   Rest API 的那些事儿 作者/ asterisk 在软件行业快速发展的今天,传统的软件授权已经不能足以 ...

  5. CentOS firewall添加开放端口

    添加 firewall-cmd --zone=public --add-port=80/tcp --permanent (–permanent永久生效,没有此参数重启后失效) 重新载入 firewal ...

  6. Centos6.4安装Zimbra初步教程

    环境: 1.centos6.4*64位版本 2.主机最好内存设置在2G以上,要不安装的时候卡死你 3.下载最新的开源的Zimbra安装包,下载zcs-8.0.4_GA_5737.RHEL6_64.20 ...

  7. [Debug] Inspect and Style an Element in DevTools that Normally Disappears when Inactive

    It’s handy to inspect an element in your browser’s DevTools when you need to experiment or tweak it’ ...

  8. 数学之路-python计算实战(21)-机器视觉-拉普拉斯线性滤波

    拉普拉斯线性滤波,.边缘检測  . When ksize == 1 , the Laplacian is computed by filtering the image with the follow ...

  9. C++中使用Json的方法

    使用 C++ 处理 JSON 数据交换格式 一.摘要 JSON 的全称为:JavaScript Object Notation,顾名思义,JSON 是用于标记 Javascript 对象的,JSON官 ...

  10. 微信JSSDK使用指南

        这篇文章主要来说说微信JSSDK的一些配置和微信分享的使用,包括从前端sdk文件引入到server端和微信server的交互. 另外Tangide已经把一些工作做好了.我会简要说一说怎么把它用 ...