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

news2024/12/24 2:41:59

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

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

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！');
         }
      },
   },