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. JVM(一):源文件的转变

    JVM(一):源文件的转变 本文讲述一个.java源文件是如何经过javac编译器的一系列操作变为.class文件的. 编译 说到编译,大家都能想到是编译器经过一系列方法将源代码转变为目标机器代码,但 ...

  2. mkswap,swapon, swapoff命令:创建交换分区

    linux支持虚拟内存,用作虚拟内存的硬盘部分被称为交互空间(swap space),虚拟内存是指使用磁盘当作内存的扩展,这样可用内存的大小就相应的增大了.内核会将暂时不用的内存块的内容写到硬盘上,从 ...

  3. CentOS 7 es搭建测试

    搭建本地yum repo pass 指定特定repo 安装,比如安装wget.(指定特定repo 是为了从最快的repo安装) yum --disablerepo=\* --enablerepo=os ...

  4. 镜像二叉树——剑指Offer

    https://www.nowcoder.net/practice/564f4c26aa584921bc75623e48ca3011?tpId=13&tqId=11171&tPage= ...

  5. Vue中-下拉框可以选择可以填写

    <el-form-item label="方法名称"> <el-autocomplete popper-class="my-autocomplete&q ...

  6. node安装-Win+Linux+Mac osx

    node下载地址,除了Mac osx或Win平台,仅有Linux平台命令安装. Win.Mac 点击即可下载(注:Mac有dmg和pkg安装格式). Linux分为Redhot和Deepin系列,安装 ...

  7. Mali GPU OpenGL ES 应用性能优化--基本方法

    1. 经常使用优化工具 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTXlBcnJvdw==/font/5a6L5L2T/fontsize/400/fil ...

  8. 李洪强漫谈iOS开发[C语言-044]-翻译数字

     李洪强漫谈iOS开发[C语言-044]-翻译数字

  9. extern &quot;C&quot; 的含义:实现C++与C及其他语言的混合编程

    C++中extern "C"的设立动机是实现C++与C及其他语言的混合编程.        C++为了支持函数的重载,C++对全局函数的处理方式与C有明显的不同.对于函数void ...

  10. Genymotion模拟器连接不上开发服务器解决办法

    问题截图: 问题原因:虚拟机没有联网.可以打开虚拟机的浏览器随便打开一个网站试一下能不能正常上网.如果不能正常上网. 第一步: 打开VirtualBox 点击确定.重启Genymotion.