首页 > 其他分享 >谷歌和火狐的浏览器表现差异(1)

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

时间:2023-11-08 18:14:47浏览次数:37  
标签:function 浏览器 谷歌 window 火狐 切换 tab document

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

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

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

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

标签:function,浏览器,谷歌,window,火狐,切换,tab,document
From: https://www.cnblogs.com/ljwsyt/p/17818013.html

相关文章

  • 判断浏览器类型
    判断当前浏览器类型:<scripttype="text/javascript">varSys={};varua=navigator.userAgent.toLowerCase();if(window.ActiveXObject)Sys.ie=ua.match(/msie([\d.]+)/)[1]elseif(document.getBoxObject......
  • 创建浏览器控制台进度条
    进度条函数/***创建浏览器控制台进度条*@param{number}total-任务总个数*@returns{{step:((function():({finished:boolean}))|*)}}*/functioncreateProcessBar(total){letcurr=0letfinished=falsereturn{step:()=>{if(f......
  • 关闭fireFox浏览器自动更新提示
    打开火狐浏览器并在地址栏中输入“about:config”。点击“接受风险并继续”按钮。在搜索栏输入“app.update.auto”并按下回车键。将“app.update.auto”设置为“false”。找到“app.update.enabled”并将其设置为“false”。app.update.auto.migrated是火狐浏览器的一个......
  • 2023-11-08 360浏览器 new Date().getTime() 获取到的时间戳与其它浏览器(chrome、edge
    问题描述:360浏览器newDate().getTime()获取到的时间戳比chrome或者edge要多出一些时间。原因:360浏览器对newDate的兼容性与其它浏览器厂商不同。部分网友认为是在开了极速模式下的360浏览器,会采用webkit的引擎,对含有T字符的日期时间newDate的时候就会相差几个小时,详情请看:h......
  • 谷歌浏览器 ERR_SSL_PROTOCOL_ERROR
    9月28日,Chromium提交了一个标题为DisableSHA1inTLSserverhandshakesbydefault的部署,默认禁用了TLS握手时的SHA1加密方法,这本是一次正常且正确的发布,因为SHA1已经被公认为不安全的。但是却没想到有一些老旧的系统依然使用了较低版本的OpenSSL,而低版本的OpenSSL存在bug,会强制......
  • 谷歌Chrome及微软Edge浏览器崩溃问题处理
    问题表现近期用户在使用谷歌Chrome及微软Edge浏览器时,出现网页崩溃无法访问的情况chromeedge原因分析根据错误提示,检查日志,系C:\Windows\System32\winhafnt64.dll文件不符合微软签名规则导致的冲突根据提示信息,检查到该文件发行公司为T.E.CSolutions(GZ,)Limited,查询......
  • 浏览器的网页格式出现问题,并且在别人的电脑上没问题,代码也没问题的解决办法
    https://baijiahao.baidu.com/s?id=1777341926071232063&wfr=spider&for=pc看起来像是浏览器设置的问题,可是浏览器设置为了100%,还是原来的情况。缓存清除了也没有用,最后问了同事才发现是电脑的显示设置原因。直接按鼠标缩放没有用。解决办法:右击桌面,显示设置,找到缩放和布局,将......
  • Spectron: 谷歌的新模型将语音识别与语言模型结合进行端到端的训练
    Spectron是谷歌Research和VerilyAI开发的新的模型。与传统的语言模型不同,Spectron直接处理频谱图作为输入和输出。该模型消除归纳偏差,增强表征保真度,提高音频生成质量。它采用预训练的语音编码器和语言解码器,提供文本和语音的延续。但是频谱图帧生成比较费时并且无法并行文本和......
  • 手机浏览器中实现可拖动div
    vartouchStartX=0;vartouchStartY=0;varmoveX=0;varmoveY=0;vardiv=document.getElementById('yourDivId');//获取你要拖动的divdiv.addEventListener('touchstart',function(e){vartouch=e.touches[0];//获取第一个触点touch......
  • 电脑怎么取消默认浏览器
    如何取消默认浏览器设置1、取消浏览器默认设置的步骤是:打开浏览器,点击右上角的菜单,进入“选项”;在“基本设置”中,取消勾选“启动时检查是否为默认浏览器”。2、首先点击“开始”菜单,找到“控制面板”,并点击打开。其次在控制面板中,你需要找到“默认程序”选项。它可能被放在页面......