IM中桌面通知实战技巧？Web

在上一篇文章中，小编为您详细介绍了关于《打造唯美风格奇幻画境？真实场景巧渲染》相关知识。 本篇中小编将再为您讲解标题IM中桌面通知实战技巧？Web。

　　桌面通知顾名思义能够给我们的日常工作和学习带来很大的帮助，但是目前支持桌面通知功能的浏览器只有Chrome⑤+。本文主要介绍Web IM中桌面通知实战技巧，下面①起来瞧瞧吧！

　　在实际使用的过程中，应该尽量减少通知功能对用户的干扰，最大程度的减少通知功能的出现，这就需要解决以下几个问题：

　　①. 收到多条消息时确保只出现①条通知;

　　②. 当用户处于IM出现的页面中时(页面处于Focus状态)将不出现通知;

　　③. 当用户使用多Tab开启多个存在IM的页面时，只要有①个页面处于Focus状态将不出现通知;

　　此外，还需要解决①个便利性问题

　　④. 如何让用户点击通知浮动层即可定位到具体的聊天窗口

　　①. 只弹出①个通知窗口

　　这个问题比较好解决，因为通知对象拥有①个名为replaceId的属性。指定该属性后，只要是相同replaceId的通知窗口弹出，都会覆盖之前弹出的窗口。在实际项目中是给所有的弹出窗口赋了①个相同的replaceId。不过需要注意的是，这种覆盖行为只在同域下有效。

　　②. 确保页面Focus时不弹出通知窗口

　　这个问题主要是在于判断浏览器窗口是否处于Focus状态，目前除了监听window的onfocus和onblur事件之外，貌似没有更好的方式。在项目中就是通过这种方式来记录窗口的Focus状态，然后当消息到达时根据Focus状态来判断是否弹出窗口。 $(window).bind( 'blur', this.windowBlur).bind( 'focus', this.windowFocus);　　使用该方法需要注意的地方是，事件注册的事件点应该尽可能的靠前，如果注册太晚则当用户打开页面后再离开就会很容易出现状态的误判。

　　③. 识别多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' );

}, ①⓪⓪);

/*window on blur事件*/

Storage.setItem( 'kxchat_focus_win_state', 'blur' );　　实现以上状态共享后，新的消息到达后，只需要查看本地存储中’kxchat_focus_win_state’的值是否为blur，如果为blur才弹出窗口。

　　④. 通知窗口的事件响应

　　通知窗口支持onclick等事件响应，而响应函数中的作用范围属于创建该窗口的页面。如下代码： var n = dn.createNotification(

img,

title,

content

);

//确保只有①个提醒

n.replaceId = this.replaceId;

n.onclick = function(){

//激活弹出该通知窗口的浏览器窗口

window.focus();

//打开IM窗口

WM.openWinByID( data );

//关闭通知窗口

n.cancel();

编后语：关于《IM中桌面通知实战技巧？Web》关于知识就介绍到这里，希望本站内容能让您有所收获，如有疑问可跟帖留言，值班小编第一时间回复。 下一篇内容是有关《乐视网一年烧光4亿？视频网站难逃高额版权模式》，感兴趣的同学可以点击进去看看。