javascript关于tab页面切换、最小化及长时间不操作安全问题实现

平时做前端开发，对于页面切换、最小化、长时间不操作这些安全问题，其实接触不多，除非涉及到隐秘问题，可能需要将这些实现考虑进去。这次我接到这个需求时，也是处于懵逼状态

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初始化，从新倒计时。

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，酱紫就能完成长时间不操作的问题了

js实现tab栏切换效果

本文实例为大家分享了js实现tab栏切换效果的具体代码，供大家参考，具体内容如下

效果展示：