谷歌和火狐的浏览器表现差异（1）-526互联

作为主流浏览器的谷歌和火狐，其内核在一些问题处理上有一些差异，比如一些样式、事件。

就事件来说，监听界面切换就是差异之一。

就原因来分析，就是二者对于document和window的范围界定有差异，火狐认为浏览器tab就是window，所以在切换tab时可以触发到window的事件，而谷歌则认为tab对应的是ducument，可视区域才是window范围。具体示例：

场景：监听页面切换，在切换回页面时刷新数据。

可用事件：window的blur+focus，以及document的visibilityChange。

具体表现：1.只用document--visibilityChange，两者都OK；

2.只用window--blur+focus，谷歌在切换浏览器tab页时无法触发。

当然，两者是有差别的，一个是切换是否可见，比如最小化、切换tab、切换窗口等；一个是window的聚焦与焦点移出。

代码示例：

 1 document.addEventListener('visibilitychange', function(){  
 2     if (document.hidden){  
 3         document.title ='I am here! Q~~Q';  
 4         clearTimeout(titleTime);  
 5     }else{  
 6         document.title = 'Welcome (o°ω°o) happy ';  
 7         titleTime = setTimeout(function() {  
 8             document.title = OriginTitile;  
 9         }, 1000); // 2秒后恢复原标题  
10     }  
11 });

1 window.addEventListener('blur', function(){  
2    
3 }); 
4 window.addEventListener('focus', function(){  
5    
6 });

当然，使用实名函数达到避免重复绑定或绑定前先移除旧的事件的目的。