您的位置:首页资讯编程开发 → Web IM中桌面通知实战技巧

Web IM中桌面通知实战技巧

时间:2011/8/10 8:43:54来源:百度整理作者:lff我要评论(0)

  桌面通知顾名思义能够给我们的日常工作和学习带来很大的帮助,但是目前支持桌面通知功能的浏览器只有Chrome5+。本文主要介绍Web IM中桌面通知实战技巧,下面一起来瞧瞧吧!
  在实际使用的过程中,应该尽量减少通知功能对用户的干扰,最大程度的减少通知功能的出现,这就需要解决以下几个问题:
  1. 收到多条消息时确保只出现一条通知;
  2. 当用户处于IM出现的页面中时(页面处于Focus状态)将不出现通知;
  3. 当用户使用多Tab开启多个存在IM的页面时,只要有一个页面处于Focus状态将不出现通知;
  此外,还需要解决一个便利性问题
  4. 如何让用户点击通知浮动层即可定位到具体的聊天窗口
  1. 只弹出一个通知窗口
  这个问题比较好解决,因为通知对象拥有一个名为"replaceId"的属性。指定该属性后,只要是相同replaceId的通知窗口弹出,都会覆盖之前弹出的窗口。在实际项目中是给所有的弹出窗口赋了一个相同的replaceId。不过需要注意的是,这种覆盖行为只在同域下有效。
  2. 确保页面Focus时不弹出通知窗口
  这个问题主要是在于判断浏览器窗口是否处于Focus状态,目前除了监听window的onfocus和onblur事件之外,貌似没有更好的方式。在项目中就是通过这种方式来记录窗口的Focus状态,然后当消息到达时根据Focus状态来判断是否弹出窗口。

$(window).bind( 'blur', this.windowBlur).bind( 'focus', this.windowFocus);
  使用该方法需要注意的地方是,事件注册的事件点应该尽可能的靠前,如果注册太晚则当用户打开页面后再离开就会很容易出现状态的误判。
  3. 识别多Tab的Focus状态
  多页面间的状态共享可以通过本地存储来实现:
  浏览器窗口Focus时修改本地存储中指定key的值为"focus"
  浏览器窗口Blur时修改本地存储中指定key的值为"blur"
  需要注意的是,Chrome下从一个Tab切换到另一个Tab时,Blur有可能比Focus后写入存储中,因此修改Focus状态时需要异步处理。
/*window on focus事件*/ 
//用延时是为了解决多个Tab之间切换时,始终让Focus覆盖其他Tab的Blur事件 
//注: 如果在点击Tab之前没有Focus到document上则点击Tab是不会触发Focus的 
setTimeout( function(){ 
    Storage.setItem( 'kxchat_focus_win_state', 'focus' ); 
}, 100); 
/*window on blur事件*/ 
Storage.setItem( 'kxchat_focus_win_state', 'blur' ); 
  实现以上状态共享后,新的消息到达后,只需要查看本地存储中’kxchat_focus_win_state’的值是否为blur,如果为blur才弹出窗口。
  4. 通知窗口的事件响应
  通知窗口支持onclick等事件响应,而响应函数中的作用范围属于创建该窗口的页面。如下代码:
var n = dn.createNotification( 
    img, 
    title, 
    content 
); 
//确保只有一个提醒 
n.replaceId = this.replaceId; 
 
n.onclick = function(){ 
    //激活弹出该通知窗口的浏览器窗口 
    window.focus(); 
    //打开IM窗口 
    WM.openWinByID( data ); 
    //关闭通知窗口 
    n.cancel(); 
};
  在onclick的响应函数中访问的window对象即属于当前创建页面,因此可以很方便的与当前页面进行交互。以上代码便实现了点击弹出窗口会跳转到对应的浏览器窗口和打开IM窗口。

相关视频

    没有数据

相关阅读 wwe2k17怎么解锁技 wwe2k17锁技设置方法wwe2k17怎么解锁人物 wwe2k17人物解锁方法wwe2k17生涯模式攻略 wwe2k17生涯模式怎么玩wwe2k17配置要求一览 wwe2k17配置要求高吗wwe2k17豪华版和标准版有什么区别 wwe2k17豪华版内容介绍wwe2k17操作按键说明 wwe2k17怎么操作火萤视频桌面没声音怎么办 火萤视频桌面怎么没声音

文章评论
发表评论

热门文章 没有查询到任何记录。

最新文章 编程语言排行榜2020年android studio怎么删 eclipse怎么设置编码格式 eclipse设置编码格andriod studio如何使用真机测试 andriod sandroid studio怎么生成apk android studioandroid studio如何导入jar包 android stud

人气排行 安卓模拟器BlueStacks安装使用教程编程语言排行榜2020年9月 TIOBE编程语言排行eclipse字体大小怎么设置 eclipse字体大小plsql developer怎么连接数据库 plsql deveTomcat9.0安装教程 Tomcat9.0环境变量配置方plsql developer怎么使用 plsql developerVisual Studio 2015环境搭建教程Eclipse优化设置教程 Eclipse优化设置技巧