谷歌和火狐的浏览器表现差异(1)

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

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

就原因来分析,就是二者对于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 }); 

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

posted @ 2023-11-08 17:58  TheFirstDream  阅读(72)  评论(0编辑  收藏  举报