<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<h1>浏览器窗口切换激活事件</h1>
<div id="app"></div>
<script>
/**
* visibilitychange：当浏览器可见性发生变化的时候，这个事件会被触发
*
* 我们可以在document对象上注册一个监听visibilitychange事件，
* 根据document.hidden或者document.visibilityState属性做一些业务逻辑。
*
* 示例场景
* 客户端内嵌H5页面经常遇到的一个场景：H5页面有一个视频，正在播放时，点击页面其他按钮，
* 进入客户端原生页面，或者打开一个新的webview，这时视频应该暂停播放，返回该页面时，视频继续播放。
*
*/
document.addEventListener('visibilitychange', (ev) => {
// console.log(ev);
console.log(document.hidden, document.visibilityState) // visible hidden
console.log('----active window ------')
if(!document.hidden) {
doSomething()
}
}, false)
function doSomething() {
console.log('do some thing ...')
}
</script>
</body>
</html>
效果
