visibilityChange,这个在浏览器标签页被隐蔽或显示的时候都会除非该方法,看似能知足页面切换或最小化。
但是它有个问题,便是在页面缩放,下图绿色标识,而非最小化时也会实行该方法。

document.addEventListener(visibilityChange, () => { let screenTop = window.localStorage.getItem('screenTop'); // 隐蔽时触发了2次 setTimeout(() => { // 采取screenTop,是由于缩放时也会触发该事宜,无法区分是缩放还是最小化 if (screenTop && screenTop == window.screenTop && document.visibilityState === hidden) { this.props.dispatch({ type: 'SET_PAYROLL_STATUS', data: false }) // window.location.href = window.location.href; } else { window.localStorage.setItem('screenTop', window.screenTop) } }, 0) }, false)

上面代码中的判断screenTop==window.screenTop能将缩放这个打消在外,结合document.visibilityState能实现页面切换、页面最小化的时候修正状态担保页面内容安全,譬如通过设置状态为false,不展示设计安全的内容。

而判断永劫光是否操作,紧张是通过setInterval来倒计时变量count,如果有操作就将count初始化,重新倒计时。

html最小化页面javascript关于tab页面切换最小化及长时光不操作平安问题实现 GraphQL

hasOperate = (callback, second) => { let count = 0; const countTime = () => { timer = setInterval(() => { if (document.visibilityState === 'hidden') { count = 0; // clearInterval(timer); } count++; if (count == second) { callback(); clearInterval(timer); count=0 } }, 1000); } let x; let y; document.addEventListener('mousemove', () => { let x1 = event.clientX; let y1 = event.clientY; if (x != x1 || y != y1) { count = 0; } x = x1; y = y1; }) document.addEventListener('keydown', () => { count = 0; }) document.addEventListener('scroll', () => { count = 0; })

上面代码,紧张通过统计count即是你设置的初始化韶光second,进行回调,回调的紧张内容是隐蔽安全页面;如果在统计的过程中创造有滚动或鼠标移动以及键盘按下等干系操作,则将count初始化为0,酱紫就能完发展韶光不操作的问题了