谷歌和火狐的浏览器表现差异(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 });
当然,使用实名函数达到避免重复绑定或绑定前先移除旧的事件的目的。
FIGHTING