js 实现页面全屏功能并监听屏幕变化requestFullscreen

代码如果对大家有帮助,大家记得点赞+评论!!!
js 中提供有相应的全屏/退出全屏方法,requestFullscreen() 全屏,exitFullscreen() 退出全屏

javascript 复制代码
 - fullscreenElement,只读属性 Document.fullscreenElement 返回当前页面中以全屏模式呈现的Element,如果
 	当前页面未使用全屏模式,则返回 null。

	尽管这个属性是只读的,但如果修改它,即使在严格模式下也不会抛出错误;它的 setter 方法是空操作将被
	忽略。
	
 - requestFullscreen,是一个方法,可以让你的网页或者视频在浏览器全屏显示。这个方法可以应用于任何DOM元素
 	,但最常见的是应用于video元素。
   
   注意:requestFullscreen()方法将请求进入全屏模式,但是它不会自动进入全屏模式,它需要用户的明确同意。
   如果用户同意了,浏览器会进入全屏模式,并且此时可以通过document.fullscreenElement属性获取当前处于全
   屏模式的元素。

 - exitFullscreen,方法请求将当前在全屏模式下呈现的文档元素退出全屏模式,恢复屏幕的先前状态。这通常会
   逆转先前调用Element.requestFullscreen() 的效果。

js 实现页面全屏功能

javascript 复制代码
//全屏
const toFullScreen =()=> {
    // DOM对象的一个属性,会判断当前是否是全屏
    const fullscreenModule = document.querySelector('.testFull');
    let full = document.fullscreenElement;

    if (!full) {
      // 实现全屏模式
      fullscreenModule.requestFullscreen();
    } else {
      // 变为不是全屏模式->退出全屏模式
      document.exitFullscreen();
    }
}
javascript 复制代码
 //退出全屏
const exitFullScreen =()=> {
    let full = document.fullscreenElement;
	//判断是否全屏,如果当前是全屏状态,则退出全屏
    if (full) {
      document.exitFullscreen();
    }
  }

js 实现监听屏幕变化

javascript 复制代码
//监听屏幕变化事件
 window.addEventListener('fullscreenchange', function() {
 	  //document.fullscreenElement
 	  //存在,代表当前页面处理全屏状态
 	  //不存在,代表当前页面已经退出全屏状态
      if (!document.fullscreenElement) {
        // 执行退出全屏后的操作

      }
});

//销毁监听事件
window.removeEventListener('fullscreenchange', function() {});
相关推荐
nbsaas-boot4 小时前
Java 正则表达式白皮书:语法详解、工程实践与常用表达式库
开发语言·python·mysql
chao_7894 小时前
二分查找篇——搜索旋转排序数组【LeetCode】两次二分查找
开发语言·数据结构·python·算法·leetcode
一斤代码5 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
风无雨5 小时前
GO 启动 简单服务
开发语言·后端·golang
斯普信专业组5 小时前
Go语言包管理完全指南:从基础到最佳实践
开发语言·后端·golang
3Katrina5 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_6 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
我是苏苏6 小时前
C#基础:Winform桌面开发中窗体之间的数据传递
开发语言·c#
伍哥的传说6 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
我在北京coding7 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js