HTML页面的全屏显示

您所在的位置：网站首页 › 网页打开直接全屏怎么设置 › HTML页面的全屏显示

HTML页面的全屏显示

2024-07-14 02:32| 来源: 网络整理| 查看: 265

使用 Fullscreen api 处理页面全屏 HTML 页面的全屏显示

使用 Element.requestFullscreen() 可以使元素进入全屏，该方法是异步方法，返回一个 Promise 对象

整个页面全屏显示

比如我们需要让整个网页全屏显示，只需要用 html 元素调用 requestFullscreen 方法即可。

示例代码：

参数

requestFullScreen 接收一个参数 options(可选), options 是一个对象, 但是只有一个字段 navigationUI, 用于控制是否在元素处于全屏模式时显示导航条. 可选值为 auto, hide, show, 默认值为 auto.

当元素不在文档内时, 调用requestFullScreen回失败

全屏显示案例进入全屏 const html = document.querySelector('html'); const fullScreenBtn = document.getElementById('full-screen-btn'); fullScreenBtn.onclick = () => { html.requestFullscreen() .then(() => { console.log('进入全屏成功')； }) .catch(() => { console.log('进入全屏失败')； }) } // 不在文档内的内容全屏 const el = document.createElement('div'); el.requestFullscreen() .then(() => { console.log('全屏成功'); }) .catch(() => { console.log('全屏失败'); }); 部分内容进入全屏状态

是部分内容进入全屏和页面全屏是一样的, 只是调用 requestFullScreen 方法的 dom 节点改为相应元素即可.

示例代码：

div { padding: 20px; } #section-full-container { background-color: #409EFF; color: #fff; height: 200px; } 全屏显示案例进入全屏部分全屏进入全屏 const html = document.querySelector('html'); const fullScreenBtn = document.getElementById('full-screen-btn'); fullScreenBtn.onclick = () => { html.requestFullscreen() .then(() => { console.log('进入全屏成功'); }) .catch(() => { console.log('进入全屏失败'); }) } // 部分内容全屏 const sectionFullContainer = document.getElementById('section-full-container'); const sectionFullBtn = document.getElementById('section-full-screen-btn'); sectionFullBtn.onclick = () => { sectionFullContainer.requestFullscreen() .then(() => { console.log('全屏成功'); }) .catch(() => { console.log('全屏失败'); }); } 退出全屏

退出全屏只需要调用 document 对象的 exitFullscreen. 调用这个方法会让文档回退到上一个调用Element.requestFullscreen()方法进入全屏模式之前的状态. 例如, 上面示例中, 先使整个页面进入全屏, 再点击部分全屏的按钮使 section-full-container 进入全屏. 那么整个时候调用 document.exitFullScreen() 时, 会返回整个页面全屏的状态, 需要再次调用 document.exitFullScreen() 才能完全退出全屏状态

示例代码

div { padding: 20px; } #section-full-container { background-color: #409EFF; color: #fff; height: 200px; } 全屏显示案例进入全屏退出全屏部分全屏进入全屏退出全屏 const html = document.querySelector('html'); const fullScreenBtn = document.getElementById('full-screen-btn'); fullScreenBtn.onclick = () => { html.requestFullscreen() .then(() => { console.log('进入全屏成功'); }) .catch(() => { console.log('进入全屏失败'); }) } const sectionFullContainer = document.getElementById('section-full-container'); const sectionFullBtn = document.getElementById('section-full-screen-btn'); sectionFullBtn.onclick = () => { sectionFullContainer.requestFullscreen() .then(() => { console.log('全屏成功'); }) .catch(() => { console.log('全屏失败'); }); } // 退出全屏 const exitFullScreenBtn = document.getElementById('exit-full-screen-btn'); const sectionExitFullScreenBtn = document.getElementById('section-exit-full-screen-btn'); exitFullScreenBtn.onclick = () => { exitFullScreen(); } sectionExitFullScreenBtn.onclick = () => { exitFullScreen(); }

注意该方法是 document 对象的而不是对应元素的

事件与属性

当全屏状态改变时, 对应元素会触发 fullscreenchange 事件, 该事件会冒泡, 实际使用可以统一监听 document 对象的 fullscreenchange 事件. document.fullScreenElement 属性可以访问当前正在全屏的元素节点. 没有页面全屏是返回 null.

示例代码

div { padding: 20px; } #section-full-container { background-color: #409EFF; color: #fff; height: 200px; } 全屏显示案例进入全屏退出全屏部分全屏进入全屏退出全屏 const html = document.querySelector('html'); const fullScreenBtn = document.getElementById('full-screen-btn'); fullScreenBtn.onclick = () => { html.requestFullscreen() .then(() => { console.log('进入全屏成功'); }) .catch(() => { console.log('进入全屏失败'); }) } const sectionFullContainer = document.getElementById('section-full-container'); const sectionFullBtn = document.getElementById('section-full-screen-btn'); sectionFullBtn.onclick = () => { sectionFullContainer.requestFullscreen() .then(() => { console.log('全屏成功'); }) .catch(() => { console.log('全屏失败'); }); } const exitFullScreenBtn = document.getElementById('exit-full-screen-btn'); const sectionExitFullScreenBtn = document.getElementById('section-exit-full-screen-btn'); exitFullScreenBtn.onclick = () => { exitFullScreen(); } sectionExitFullScreenBtn.onclick = () => { exitFullScreen(); } // 监听事件 document.onfullscreenchange = () => { console.log('全屏状态变更'); // 访问当前全屏的节点 console.log('当前全屏节点为: ', document.fullscreenElement); } 元素的全屏样式

使用伪类 :fullscreen, 可以给元素设置全屏时的属性, 当页面没有进入全屏是不生效, 全屏后才生效. 是当前元素属于全屏元素的时候才生效, 既当前元素为 document.fullScreenElement. 如果是父级或父级以上元素全屏, 该元素的 :fullscreen 样式并不会生效

注意: 该方法属于实验性方法, 有兼容性问题, 不建议实际项目中使用

示例代码

#container { background-color: #409EFF; color: #fff; height: 200; } /* 进入全屏是使元素变为绿色 */ #container:fullscreen { background-color: #67C23A; } fullscreen 伪类案例进入全屏 const container = document.getElementById('container'); const fullScreenBtn = document.getElementById('full-screen-btn'); fullScreenBtn.onclick = () => { container.requestFullscreen(); } 解决兼容性问题

兼容性问题可以参考 MDN 相关说明, 实际使用中可以使用 fullscreen 包进行全屏显示处理.

【本文地址】

HTML页面的全屏显示

HTML页面的全屏显示

今日新闻

推荐新闻