突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)(3)

发布时间：2020-11-27 15:01 所属栏目：115 来源：网络整理

导读：$(window).bind( 'blur', this.windowBlur).bind( 'focus', this.windowFocus); 使用该方法需要注意的地方是，事件注册的事件点应该尽可能的靠前，如果注册太晚则当用户打开页面后再离开就会很容易出现状态的误判。

$(window).bind( 'blur', this.windowBlur).bind( 'focus', this.windowFocus);

使用该方法需要注意的地方是，事件注册的事件点应该尽可能的靠前，如果注册太晚则当用户打开页面后再离开就会很容易出现状态的误判。
3. 当用户使用多Tab开启多个存在IM的页面时，只要有一个页面处于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窗口。
：页面中的相关事件很多时候具有不确定的时序性，所以我们的代码尽量不要假设某些事件触发的顺序是一定的。比如上面的blur和focus事件

实用参考：
官方文档：
html5的一个中文教程：

（编辑：ASP站长网）