傲娇大少之——【浏览器切换标签事件：visibilitychange】

今日复今日，今日何其少！今日又不为，此事何其了？人生百年几今日，今日不为真可惜！若言姑待明朝至，明朝又有明朝事。为君聊赋今日诗，努力请从今日始。

浏览器切换标签事件

最近在开发播放器，发现了个问题，谷歌浏览器在播放直播的时候，切换浏览器的标签页，直播自动停止了，这肯定不行啊，于是……

visibilitychange

官方解释：

当其选项卡的内容变得可见或被隐藏时，会在文档上触发 visibilitychange (能见度更改)事件。

用法：

该事件不包括文档的更新的可见性状态，但是您可以从文档的 visibilityState 属性中获取该信息。

啥意思呢，直接上代码：

// 注意：处于兼容性原因，我们使用document.addEventListener而不是window.addEventListener来注册回调。
document.addEventListener('visibilitychange', function(event) {
	console.log(event)
});

控制台：
根据控制台的打印信息，可以看到事件的属性中没有标识文档可见性的属性。但是可以使用document.visibilityState属性去判断呀！

上代码：

document.addEventListener('visibilitychange', function(event) {
	if (document.visibilityState === 'hidden') { // 隐藏标签页
		console.log('hidden');
	} else { // 显示标签页
		console.log('visible');
	}
});