阅读量:0
HTML5全屏API允许开发者创建能够进入和退出全屏模式的网页，提供更沉浸的用户体验。
HTML5全屏(Fullscreen)API
HTML5全屏（Fullscreen）API是一组用于在Web浏览器中实现全屏显示的功能的API，它提供了一种简单的方式，使得网页内容能够占据整个屏幕空间，提供更丰富的用户体验。
主要方法
1、Element.requestFullscreen()：此方法用于将指定的元素进入全屏模式，这个方法可以应用于任意的HTML元素，lt;div>、<video>或者<canvas>等，示例代码如下：
```javascript
function launchFullScreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
```
2、Document.exitFullscreen()：此方法用于退出全屏模式，返回原先的布局，该方法在一些老的浏览器上也是支持前缀方法，示例代码如下：
```javascript
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozExitFullScreen) {
document.mozExitFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
```
属性与事件
1、document.fullscreenElement：当前处于全屏状态的元素。
2、document.fullscreenEnabled：标记 fullscreen 当前是否可用。
3、fullscreenchange 事件：当进入/退出 全屏模式时,会触发 fullscreenchange 事件。
CSS控制规则
浏览器提供了一些有用的 fullscreen CSS 控制规则，如：
:webkitfullscreen { /* properties */ } :mozfullscreen { /* properties */ } :fullscreen { /* properties */ } :webkitfullscreen video { width: 100%; height: 100%; } ::backdrop { /* properties */ }FAQs
1、问题一：为什么需要使用带前缀的方法名？
解答：由于各个浏览器内核的不同，某些方法名可能需要进行检测判断，以确保兼容性。requestFullscreen方法在一些老的浏览器里面依然使用带前缀形式的方法名，因此可能需要进行检测判断。
2、问题二：如何确保用户同意进入全屏模式？
解答：这个API需要在用户交互比（如点击按钮）后才能调用，否则浏览器会报错：Uncaught (in promise) TypeError: Permissions check failed，如果用户拒绝，则可能出现各种不完全的全屏。
HTML5 全屏（Fullscreen）API 详细介绍
HTML5 引入的全屏（Fullscreen）API 允许网页开发者控制页面元素进入全屏模式，从而提供更沉浸的用户体验，以下是对全屏API的详细介绍：
1. 全屏模式
全屏模式是指将页面或页面上的某个元素放大至整个屏幕，用户可以看到整个屏幕的界面而无需任何遮挡，全屏模式通常用于视频播放、游戏、演示等场景。
2. 支持的浏览器
大多数现代浏览器都支持全屏API，包括但不限于Chrome、Firefox、Safari、Edge等。
3. 相关接口
3.1 Document 接口
document.fullscreenEnabled: 检查当前文档是否支持全屏模式。
document.fullscreenElement: 获取当前处于全屏模式的元素。
document.exitFullscreen(): 退出全屏模式。
3.2 Element 接口
element.requestFullscreen(): 请求将元素置于全屏模式。
element.exitFullscreen(): 请求退出全屏模式。
3.3 Screen 接口
screen.width 和screen.height: 获取屏幕的宽度和高度。
4. 使用方法
4.1 请求全屏
要使页面或页面上的某个元素进入全屏模式，可以使用以下代码：
// 请求整个页面进入全屏模式 document.documentElement.requestFullscreen(); // 请求页面上的某个元素进入全屏模式 element.requestFullscreen();
4.2 退出全屏
退出全屏模式可以通过以下方式实现：
// 退出全屏模式 document.exitFullscreen();
4.3 监听全屏状态变化
可以通过监听以下事件来跟踪全屏状态的变化：
fullscreenchange: 当全屏状态发生变化时触发。
fullscreenerror: 当全屏请求失败时触发。
document.addEventListener('fullscreenchange', (event) => { if (document.fullscreenElement) { console.log('全屏模式已开启'); } else { console.log('全屏模式已关闭'); } });5. 注意事项
并非所有元素都可以请求全屏模式，某些特定的元素（如<iframe>）可能不支持全屏。
在某些浏览器中，用户需要手动允许页面进入全屏模式。
全屏模式可能会影响页面的布局和样式，因此在全屏之前可能需要进行一些调整。
6. 归纳
HTML5的全屏API为网页开发者提供了一种简单而强大的方式来控制页面元素的全屏显示，通过合理使用这些API，可以提升用户体验，尤其是在视频播放、游戏和演示等场景中。
