网页全屏自定义内容如何实现？

技术分享 3年前 (2023-07-15) 0 999+

“ 浏览器网页全屏如何实现呢？”

同学突然问你网页全屏是如何实现的？你会怎么回答呢？习惯用第三方插件的同学肯定会第一时间去找有没有使用简单的插件，今天就用几行代码帮大家实现下网页全屏。

screenfull 是用于跨浏览器使用 JavaScript Fullscreen api 的简单包装器，可让您将页面或任何元素全屏显示。具体实现步骤请看下文！

一、安装：

npm install --save screenfull

安装完成之后在使用页面进行按需引入：

import screenfull from 'screenfull'

二、screenfull 核心属性和方法：

2.1、screenfull.enabled

检测全屏插件是否可用，返回的是一个 Boolean 值

2.2 screenfull.isFullscreen

检测当前状态是否是全屏，返回一个 Boolean 值

2.3 screenfull.toggle()

控制全屏或退出全屏，如果当前是全屏会退出全屏，否则进入全屏状态

2.4 screenfull.request()

检请求全屏某个元素，即进入全屏的时候，只显示某个元素，退出全屏后进入正常状态，使用时必须传 DOM 请求参数。

2.5 screenfull.on

添加监听全屏状态变化

screenfull.on('change', () => {

   console.log('全屏状态变化' );

});

检测全屏错误

screenfull.on('error', () => {

   console.log('全屏报错' );

});

2.6 screenfull.off

移除监听事件

screenfull.off('change', callback);

callback 是一个可选参数，不做处理时可以不传。

有上面这些方法和属性基本够我们使用了！

以全屏时只展示某个元素为例，实现Demo如下：

<template>  <div class="event-con">   大容器   <div class="detail" >    <div class="selected-event" >     内容1    </div>    <div     class="detail-module"     :class="[isFull ? 'fullScreen-con' : 'notFull']"      ref="fullDom"      >      内容2    </div>   </div>  </div> </template>  <script> import screenfull from 'screenfull'' export default {  data() {   return {    isFull: false,   }  },  created() {   if (screenfull.enabled) {    screenfull.on('change', () => {     console.log('全屏事件监听', screenfull.isFullscreen)     if (screenfull.isFullscreen) {      this.isFull = true     } else {      this.isFull = false     }    })   }  },  beforeDestroy() {   screenfull.off('change')  },  methods: {   toggleScreen() {    // 判断是否可用    if (!screenfull.enabled) {     // 此时全屏不可用     this.$message.warning('此时全屏组件不可用')      return    }     //   如果可用 就可以全屏     if (screenfull.isFullscreen) {      screenfull.toggle()     } else {      screenfull.request(this.$refs.fullDom)     }    },  } } </script>  <style lang="scss" scoped>  </style>

关注 Bug 帮，Debug 不迷路！