首页 > 其他分享 >js全屏,监听页面是否全屏

js全屏,监听页面是否全屏

时间:2024-08-10 20:23:19浏览次数:8  
标签:requestFullscreen document js else 全屏 element 监听 页面

要检测页面是否处于全屏模式,可以使用 JavaScript 提供的 Fullscreen API。以下是一个简单的示例代码,演示如何检测页面是否处于全屏模式:

// 检测页面是否处于全屏模式
function isPageFullscreen() {
    return !!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
}
 
// 监听全屏状态变化
document.addEventListener('fullscreenchange', function () {
    if (isPageFullscreen()) {
        console.log('页面已进入全屏模式');
    } else {
        console.log('页面已退出全屏模式');
    }
});
 
// 进入全屏
function requestFullscreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }
}
 
// 退出全屏
function exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}
 
// 示例:点击按钮进入/退出全屏
const fullscreenButton = document.getElementById('fullscreen-button');
fullscreenButton.addEventListener('click', function () {
    if (isPageFullscreen()) {
        exitFullscreen();
    } else {
        requestFullscreen(document.documentElement);
    }
});

在上面的示例中,`isPageFullscreen` 函数用来检测页面是否处于全屏模式,`requestFullscreen` 函数用来请求进入全屏,`exitFullscreen` 函数用来退出全屏。另外,通过监听 `fullscreenchange` 事件可以实时获取页面的全屏状态变化。

标签:requestFullscreen,document,js,else,全屏,element,监听,页面
From: https://blog.csdn.net/2301_81449444/article/details/141095602

相关文章

  • wechat crawler url拼接 url解析 微信爬虫 json序列化 反序列化
    WechatPublicRequest\Program.csusingSystem.Collections.Specialized;usingSystem.Diagnostics;usingSystem.Web;usingNewtonsoft.Json;classProgram{staticasyncTaskMain(){varlatestTxtFilePath=GetLatestTxtFilePath();......
  • JSP广元市旅游网站6gj5o(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表系统功能:用户,景点类型,景点信息,房间类型,酒店民宿,酒店预约,出游租车,租车信息,旅游攻略,旅游社团,跟团预约技术要求:开发语言:JSP前端使用:HTML5,CSS,JSP动......
  • JSP公司薪酬管理系统1hqm4(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表系统功能:员工,部门信息,工资信息,请假信息,出勤信息技术要求:    开发语言:JSP前端使用:HTML5,CSS,JSP动态网页技术后端使用SpringBoot,Spring技术主数据库......
  • 基于nodejs+vue酒店预定管理系统[程序+论文+开题]-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着旅游业的蓬勃发展,酒店业竞争日益激烈,如何高效管理酒店预定流程,提升客户体验,成为酒店管理者关注的焦点。传统的酒店预定方式往往存在信息不对称、预订流......
  • 基于nodejs+vue酒店在线管理系统[程序+论文+开题]-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着互联网的普及和移动技术的飞速发展,传统酒店行业正经历着前所未有的变革。酒店顾客对于便捷、高效、个性化的服务需求日益增长,而传统的酒店管理模式已难......
  • 基于nodejs+vue酒店综合服务[程序+论文+开题]-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景在旅游与酒店行业日益融合的今天,酒店已不仅仅是提供住宿的场所,而是成为了集住宿、餐饮、休闲、购物等多种服务于一体的综合服务平台。随着消费者对旅行体验......
  • 基于nodejs+vue咖啡销售平台[程序+论文+开题]-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着互联网的飞速发展和电子商务的普及,线上购物已成为消费者日常生活中不可或缺的一部分。咖啡,作为一种广受欢迎的饮品,其市场需求持续增长,特别是在年轻一代......
  • JSP古田会址旅游网站t7554(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表系统功能:用户,景点类型,旅游景点,古田故事,古田人文,自驾游线路,酒店信息技术要求:    开发语言:JSP前端使用:HTML5,CSS,JSP动态网页技术后端使用SpringBoo......
  • JSP光合速率异常值分析系统vdl8c(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表技术要求:开发语言:JSP前端使用:HTML5,CSS,JSP动态网页技术后端使用SpringBoot,Spring技术主数据库使用MySQL开题报告内容一、课题名称光合速率异常值分析系......
  • JSP共享单车管理系统7jdfc(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表系统主要功能介绍:用户,单车,所属区域,站点名称,租赁信息,还车信息,单车报修技术要求: 开发语言:JSP前端使用:HTML5,CSS,JSP动态网页技术后端使用SpringBoot,Sp......