php怎样在浏览器提示信息,怎么让用户收到浏览器的消息提醒?

如何让用户在浏览器最小化的状态下也能及时的收到消息提醒呢? 这个问题作为webRd是要正面面对的. 大约可分两种场景:一种是类似桌面通知的形式还有一种是类似QQ提醒(在系统任务栏闪烁随后高亮);接下来分别研究下:

桌面提醒:

这个H5有个强大的API没错就是Notification, 没听过? 先去了解下,很详细;浏览器不同对其支持程度也不同,简单讲就是有兼容问题,而笔者要说的就是基于Notification的一款小类库 ,其支持:IE9+、Safari6、Firefox、Chrome;好吧都是前辈的结晶,我就是个搬砖的,下面附一个简单的小demo:

ps: 么有用类库, 就是练手用的..实际还是用类库吧;

function _Notification(title,option){

var Notification = window.Notification || window.mozNotification || window.webkitNotification;

Notification.permission === "granted"?creatNotification(title, option):requestPermission(title, option);

function creatNotification(title, option){

var instance = new Notification(title, option);

instance.onclick = function () {

console.log('onclick');

};

instance.onerror = function () {

console.log('onerror');

};

instance.onshow = function () {

console.log('onshow');

};

instance.onclose = function () {

console.log("close")

}

}

function requestPermission(title, option){

Notification.requestPermission(function(status) {

status === "granted"?creatNotification(title, option):failNotification(title);

});

}

function failNotification(title){

var timer;

return function(timer){

var index = 0;

clearInterval(timer);

timer = setInterval(function() {

if(index%2) {

document.head.getElementsByTagName("title")[0].innerHTML = '【   】'+ title;

}else {

document.head.getElementsByTagName("title")[0].innerHTML = '【新消息】'+ title;

}

index++;

if(index > 20) {

clearInterval(timer);

}

}, 500);

}(timer);

}

}

任务栏提醒:

这个还真是个问题; 至于解决的终极方法目前笔者还没研究明白;不过window.open 这种弹窗会触发闪烁提醒, 但需要解决用户禁止弹窗的情况,可以模拟from提交 || 超链接(a) || 利用浏览器冒泡;这几种方法都可以解决大部分被拦截的情况; 可这都不是笔者想要的;因为提示内容展示在弹窗中总是不好的,用户很容易蒙圈,怎么一有提示就多个标题栏呢...很烦,貌似内存溢出也可以,不过这个就算了,除非脑子进水了...; 期待大神指点..;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值