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

简介: JavaScript全屏,监听页面是否全屏

在JavaScript中,直接监听浏览器是否进入全屏模式并不直接支持,因为全屏API主要是关于请求和退出全屏模式的,而没有直接的监听器可以告知页面何时进入或退出全屏模式。但是,你可以通过在你的代码中跟踪全屏状态的改变来模拟这个功能。

以下是一个基本的示例,展示了如何使用全屏API来请求全屏模式,并在请求成功或失败时更新一个状态变量

javascriptlet isInFullscreen = false;
 
// 全屏请求函数
function requestFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen().then(() => {
isInFullscreen = true;
console.log("全屏模式已启用");
}).catch(err => {
console.error("无法进入全屏模式", err);
});
} else if (element.mozRequestFullScreen) { /* Firefox */
element.mozRequestFullScreen().then(() => {
isInFullscreen = true;
console.log("全屏模式已启用");
}).catch(err => {
console.error("无法进入全屏模式", err);
});
} else if (element.webkitRequestFullscreen) { /* Chrome, Safari 和 Opera */
element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT).then(() => {
isInFullscreen = true;
console.log("全屏模式已启用");
}).catch(err => {
console.error("无法进入全屏模式", err);
});
} else if (element.msRequestFullscreen) { /* IE/Edge */
element.msRequestFullscreen().then(() => {
isInFullscreen = true;
console.log("全屏模式已启用");
}).catch(err => {
console.error("无法进入全屏模式", err);
});
}
}
 
// 退出全屏函数
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen().then(() => {
isInFullscreen = false;
console.log("已退出全屏模式");
}).catch(err => {
console.error("无法退出全屏模式", err);
});
} else if (document.mozCancelFullScreen) { /* Firefox */
document.mozCancelFullScreen().then(() => {
isInFullscreen = false;
console.log("已退出全屏模式");
}).catch(err => {
console.error("无法退出全屏模式", err);
});
} else if (document.webkitExitFullscreen) { /* Chrome, Safari 和 Opera */
document.webkitExitFullscreen().then(() => {
isInFullscreen = false;
console.log("已退出全屏模式");
}).catch(err => {
console.error("无法退出全屏模式", err);
});
} else if (document.msExitFullscreen) { /* IE/Edge */
document.msExitFullscreen().then(() => {
isInFullscreen = false;
console.log("已退出全屏模式");
}).catch(err => {
console.error("无法退出全屏模式", err);
});
}
}
 
// 假设你有一个元素需要全屏
const element = document.documentElement; // 例如整个文档或者某个特定元素
 
// 你可以通过调用 requestFullscreen 来进入全屏模式
// requestFullscreen(element);
 
// 如果你需要监听键盘事件或其他事件来退出全屏模式,你可以调用 exitFullscreen
// exitFullscreen();
 
// 你可以通过 isInFullscreen 变量来检查当前是否在全屏模式
console.log(isInFullscreen ? "当前在全屏模式" : "当前不在全屏模式");


目录
相关文章
|
3月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1天前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
21 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
5天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
24 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
28天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
114 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
26天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
52 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
5月前
|
JavaScript
在 Vue.js 中使用 watch 来监听对象属性的变化
在 Vue.js 中使用 watch 来监听对象属性的变化
|
5月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
168 2
前端JS读取文件内容并展示到页面上
|
4月前
|
Web App开发 前端开发 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(一)
JavaScript动态渲染页面爬取——Selenium的使用(一)
132 4
|
4月前
|
Web App开发 数据采集 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(二)
JavaScript动态渲染页面爬取——Selenium的使用(二)
141 2
|
4月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
242 0

热门文章

最新文章