作为主流浏览器的谷歌和火狐,其内核在一些问题处理上有一些差异,比如一些样式、事件。
就事件来说,监听界面切换就是差异之一。
就原因来分析,就是二者对于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 });
当然,使用实名函数达到避免重复绑定或绑定前先移除旧的事件的目的。