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. Linux系统备份还原工具3(使用Clonezilla/再生龙对硬盘进行镜像和克隆,类似于Ghost)

    说明:经过实验验证,再生龙主要是适合在本机还原原大小的分区,不适合将镜像备份还原到不同大小分区,期间可能有很多莫名奇妙的问题出现.硬盘对拷和PXE网刻这些没发现什么不好.如果要还原到别的电脑镜像制作时 ...

  2. Canon iP2780/iP2788 清零软件

    http://www.drvsky.com/driver/iP2780_Tools.htm http://www.dyjqd.com/soft/6085.html#download http://v. ...

  3. Ubuntu 16.04 LTS 搭建LAMP

    1. LAMP是一系列自由和开源软件的集合,包含了Linux.Web服务器(Apache).数据库服务器(MySQL)和PHP(脚本语言). Apache2 Web 服务器的安装 sudo apt i ...

  4. web开发常见性能优化方式

    经常使用的高并发. 高性能web,数据库server.  1.html 静态化 : 如新闻频道更新的非常快,都是通过cms静态生成(门户,信息公布类型的站点,交互性高的如猫扑的大杂烩也是静态化,实时静 ...

  5. Vue.js 组件的三个 API:prop、event、slot

    组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...

  6. iOS tableview cell 的展开收缩

    iOS tableview cell 的展开收缩 #import "ViewController.h" @interface ViewController ()<UITabl ...

  7. Android lollipop 更新问题

    非常多朋友都说lollipop出来想试用一下,结果在网官下载的android studio 都是20版本号,也没有看见更新到android 5.0. 我也在网上狂了一下,收集到一个代理地址目測能够用, ...

  8. Cannot change version of project facet Dynamic Web Module to 3.1 (Eclipse Maven唯一解决方式)

    If you want to use version 3.1 you need to use the following schema: http://xmlns.jcp.org/xml/ns/jav ...

  9. iOS开发——swift——swift与OC之间不得不知道的21点

    swift与OC之间不得不知道的21点   自6月的WWDC大会上由苹果的大神Chris Lattner向我们首次展示swift至今已经大半年时间了,虽然绝大部分软件公司代码里还都见不到一丁点swif ...

  10. mystr = '{}{}{}'.format(mystr, random.randint(0, 9), adurl)

    mystr = '{}{}{}'.format(mystr, random.randint(0, 9), adurl)