js如何检测当前页面是否以全屏模式显示？

打野赵怀真2023-11-26 7:02

"```js

javascript 复制代码 
function isFullScreen() {
  return (
    (document.fullscreenElement && document.fullscreenElement !== null) ||
    (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
    (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
    (document.msFullscreenElement && document.msFullscreenElement !== null)
  );
}

上述代码是用于检测当前页面是否以全屏模式显示的 JavaScript 函数。它通过检查不同浏览器的全屏属性来确定是否处于全屏模式。

函数内部使用了四个属性来检测全屏状态：

  • document.fullscreenElement：标准 API，在全屏模式下返回当前全屏元素，否则返回 null。
  • document.webkitFullscreenElement：Webkit 内核浏览器 API，在全屏模式下返回当前全屏元素，否则返回 null。
  • document.mozFullScreenElement：Firefox 浏览器 API，在全屏模式下返回当前全屏元素，否则返回 null。
  • document.msFullscreenElement：IE 浏览器 API，在全屏模式下返回当前全屏元素，否则返回 null。

函数通过逻辑运算符 || 来判断是否有其中一个属性不为 null，即可确定页面是否处于全屏模式。

调用该函数可以返回一个布尔值，true 表示页面以全屏模式显示，false 表示页面不是全屏模式。

以下是使用示例：

javascript 复制代码 
if (isFullScreen()) {
  console.log(\"页面处于全屏模式\");
} else {
  console.log(\"页面不是全屏模式\");
}

请注意，全屏模式可能会受到浏览器的限制，比如需要用户操作才能进入全屏模式，或者在某些情况下无法退出全屏。因此，在实际使用中，需要根据具体需求和浏览器的支持情况进行测试和处理。

" 复制代码
相关推荐
努力学习的小刘几秒前
如何使用react-router实现动态路由
前端·javascript
PasserbyX几秒前
JS原型链
前端·javascript
curdcv_po1 分钟前
你知道Cookie的弊端吗？
前端
curdcv_po3 分钟前
前端CSS高频面试题详解
前端
Danta6 分钟前
从0开始学习three.js(1)😁
前端·javascript·three.js
我的心巴7 分钟前
vue-print-nb 打印相关问题
前端·vue.js·elementui
coderYYY26 分钟前
element树结构el-tree，默认选中当前setCurrentKey无效
前端·javascript·vue.js
GISer_Jing36 分钟前
Three.js中AR实现详解并详细介绍基于图像标记模式AR生成的详细步骤
开发语言·javascript·ar
GISer_Jing1 小时前
[总结篇]个人网站
前端·javascript
ss.li1 小时前
TripGenie：畅游济南旅行规划助手：个人工作纪实(二十二）
javascript·人工智能·python
热门推荐
01Coze扣子平台完整体验和实践（附国内和国际版对比）02KGG转MP3工具|非KGM文件|解密音频03YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】04【无人机】无人机通信模块，无人机图数传模块的介绍，数传，图传，图传数传一体电台，05从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑06【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！07神经网络架构KAN确实具有一些独特的特点及底层原理和应用场景08DeepSeek各版本说明与优缺点分析09VMware虚拟机安装Win7专业版保姆级教程（附镜像包）10海康视觉算法平台VisionMaster 4.3.0 C# 二次开发01 加载方案并获取结果