Page Visibility API之visibilitychange事件简介

Page Visibility API提供了一套让用户获悉当前网页是否可见或是否在焦点中。在多页浏览时，该属性会随着页面的切换而进行改动。当用户最小化页面或者切换至其他页面时，该API会发出一个visibilitychange事件告知网页的visibility属性已经发生了改变。

利用这个特性，我们可以针对性的做出一些动作，比如提醒用户已经离开该页面。特别是在播放视频的页面，当页面丢失焦点之后可以利用这个API做出一些特定的动作以提升网页的用户体验，比如暂停视频的播放。

注意：在使用了iframe的页面中，iframe的visibility属性跟随父文档。

页面失去焦点后改变文档的标题

1
2
3

document.addEventListener("visibilitychange", function (){
  document.title = 'new title~';
}, false);

~~该小节内容改编自MDN文档，请参考最新的兼容性说明页面Page Visibility - Can I Use~~

桌面浏览器

移动端

注意：