浏览器阻止屏幕息屏,js阻止浏览器息屏,Web网页阻止息屏

场景: 比如打开一个浏览器页面(比如大屏),想让它一直显示着,而不是过几分钟不操作就屏幕黑了.(电脑有设置电脑不操作就会多长时间就会息屏睡眠,如果要求每个客户都去操作一下电脑设置一下从不睡眠,这很不友好和现实.而且我也只想客户在大屏的时候才这样,其他页面就正常,按电脑设定走)

实现方法:
要想屏幕保持唤起一直不息屏状态，很简单，一行代码的事情：

navigator.wakeLock.request('screen');

是不是很简单,但是这里面还有一些注意点,

由于保持屏幕唤醒是一个占用资源开销的操作，所以，浏览器有个行为，那就是如果当前页面最小化，或者非当前显示标签页，屏幕的Wake锁定行为会被释放，用户再切换过来的时候，就没有锁定了，因此，还需要其他代码的处理。

document.addEventListener('visibilitychange', () => {if (document.visibilityState === 'visible') {navigator.wakeLock.request("screen")}
});

在实操过程中，很容易重复执行唤醒锁定，因此，还需要知道什么时候释放了屏幕唤醒操作，以及如何主动释放禁止熄屏的功能。

wakeLock.release().then(() => {wakeLock = null;
});

来一波vue前端代码操作试验 :

html<el-radio-group v-model="radioVlaue" @input="changeStatue()"><el-radio :label="1">不息屏</el-radio><el-radio :label="2">息屏</el-radio></el-radio-group>

export default {data() {return {wakeLock: null,};},mounted() {this.setWakeLock();},methods: {changeStatue() {if(navigator.wakeLock) {if(this.radioVlaue == 1) {this.setWakeLock();}else {this.wakeLock.release().then(() => {this.wakeLock = null;});}}},setWakeLock() {if(this.wakeLock) {return;}navigator.wakeLock.request('screen').then(result => {this.wakeLock = result;console.log('唤醒锁定已激活');this.wakeLock.addEventListener('release', () => {this.wakeLock = null;console.log('唤醒锁定已释放');});}).catch((err) => {console.error(`<span class="red">唤醒锁定失败：${err.message}</span>`);});if(navigator.wakeLock) {// 选项卡切换到当前页面，如果已经释放了熄屏，再次锁定document.addEventListener('visibilitychange', () => {if(this.wakeLock === null && document.visibilityState === 'visible' && this.radioVlaue == 1) {this.setWakeLock();}});}else {console.error('当前浏览器不支持Screen Wake Lock API！');}},},