浏览器选项卡隐藏/显示的事件?
当浏览器选项卡失去/获得焦点时是否有任何 DOM 事件?我知道 window
上有 blur
和 focus
事件,但当浏览器窗口整体失去焦点时它们也会触发。然后浏览器可能仍然对用户可见。当然,这样的事件是特定于浏览器的,但是没关系。
我想要这个的原因是因为我运行的动画可能会消耗相当多的 CPU 时间。当浏览器选项卡不可见时,没有理由继续制作动画。现在我知道现代浏览器会降低后台选项卡的计时器分辨率,但我实际上可以暂停动画,这样就不会消耗任何 CPU 时间。
如果您想知道,这就是我正在写的内容: http://panzi.github.com/Browser-Ponies/
Is there any DOM event for when the browser tab loses/gains focus? I know there are the blur
and focus
events on window
, but they also fire when the browser window as a whole loses focus. The browser might then be still visible to the user. Of course such an event would be browser specific, but that's ok.
The reason why I want this is because I run animations that might consume quite some CPU time. When the browser tab is not visible there is no reason to continue animating. Now I know that modern browsers reduce the timer resolution of background tabs, but I could actually pause the animation, so that no CPU time whatsoever is consumed.
In case you are wondering, this is what I'm writing:
http://panzi.github.com/Browser-Ponies/
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
至少 Google Chrome 支持
webkitvisibilitychange
事件和document.webkitHidden
属性。请参阅可见性 API。但它似乎只在显示的选项卡更改时触发,而不是在整个窗口最小化时触发。 Internet Explorer 似乎还有一个visibilitychange
事件,但是 文档 对此没有任何说明。At least Google Chrome supports a
webkitvisibilitychange
event and adocument.webkitHidden
property. See the visibility API. But it seems only to fire when the shown tab changes, not when the whole window is minimized. There also seems to be avisibilitychange
event for Internet Explorer, but the documentation doesn't say anything about it.我相信您会找到的最接近的东西是这里的最佳答案:
有没有办法用 Javascript 跟踪选项卡上的焦点?
The closest thing I believe you'll find is the top answer here:
Is there a way track the focus on tab with Javascript?
现在他们已经拥有了所需要的东西:
https://developer.mozilla.org/en-US/docs /Web/Guide/User_experience/Using_the_Page_Visibility_API
Now they have exactly what was needed:
https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API