Element: requestFullscreen() 方法
Element.requestFullscreen() 方法发出异步请求，使元素以全屏模式显示。
不能保证元素将进入全屏模式。如果允许进入全屏模式，返回的 Promise 将解析，元素将收到 fullscreenchange 事件，告知它现在已处于全屏模式。如果拒绝许可，Promise 将被拒绝，元素将收到 fullscreenerror 事件。如果元素已从原始文档中分离，则文档将收到这些事件。
语法
requestFullscreen()
requestFullscreen(options)
参数
options可选-
一个控制全屏模式转换行为的对象。可用的选项有：
-
控制元素在全屏模式下是否显示导航 UI。默认值为
"auto"，表示浏览器应自行决定。 screen可选 实验性-
指定要将元素置于全屏模式的屏幕。这接受一个
ScreenDetailed对象作为值，表示所选屏幕。
-
返回值
一个 Promise，在完成全屏转换时以 undefined 值解析。
异常
requestFullscreen() 过程通过拒绝其返回的 Promise 来宣布错误情况，而不是抛出传统异常。拒绝处理程序接收以下异常值之一：
TypeError-
TypeError异常可能在以下任何情况下发生：- 包含元素的文档未完全激活；也就是说，它不是当前活动的文档。
- 元素不包含在文档中。
- 元素不允许使用
fullscreen功能，无论是由于 权限策略 配置还是其他访问控制功能。 - 元素及其文档是同一个节点。
- 元素是一个 弹出窗口，已经通过
HTMLElement.showPopover()显示。
安全
需要瞬时用户激活。用户必须与页面或 UI 元素进行交互才能使此功能正常工作。
用法说明
兼容元素
您希望置于全屏模式的元素必须满足少数几个简单要求：
- 它必须是标准 HTML 元素之一，或者是
<svg>或<math>。 - 它不是
<dialog>元素。 - 它必须位于顶级文档中，或位于已应用
allowfullscreen属性的<iframe>中。
此外，任何设置的权限策略都必须允许使用此功能。
检测全屏激活
您可以通过使用 requestFullscreen() 返回的 Promise 来确定您尝试切换到全屏模式是否成功，如下面的示例所示。
要了解何时其他代码已切换全屏模式的开启和关闭，您应该在 Document 上为 fullscreenchange 事件建立监听器。监听 fullscreenchange 也很重要，以便在用户手动切换全屏模式或用户切换应用程序导致您的应用程序暂时退出全屏模式时了解情况。
示例
请求全屏模式
此示例在按下 Enter 或 Shift + F 键时，将 <video> 元素切换进出全屏模式。脚本使用 document.fullscreenElement 检查文档当前是否处于全屏状态。如果文档处于全屏状态，它会调用 document.exitFullscreen() 退出。否则，它会在 <video> 元素上调用 requestFullscreen()。
const video = document.querySelector("video");
document.addEventListener("keydown", (event) => {
// Note that "F" is case-sensitive (uppercase):
if (event.key === "Enter" || event.key === "F") {
// Check if we're in fullscreen mode
if (document.fullscreenElement) {
document.exitFullscreen();
return;
}
// Otherwise enter fullscreen mode
video.requestFullscreen().catch((err) => {
console.error(`Error enabling fullscreen: ${err.message}`);
});
}
});
<p>
The video element below shows a time-lapse of a flower blooming. You can
toggle fullscreen on and off using <kbd>Enter</kbd> or <kbd>Shift</kbd> +
<kbd>F</kbd> (uppercase "F"). The embedded document needs to have
<a
href="https://mdn.org.cn/en-US/docs/Web/API/Element/focus_event">
focus
</a>
for the example to work.
</p>
<video controls loop src="/shared-assets/videos/flower.mp4" width="420"></video>
使用 navigationUI
在此示例中，通过在文档的 Document.documentElement（即文档的根 <html> 元素）上调用 requestFullscreen()，将整个文档置于全屏模式。
let elem = document.documentElement;
elem
.requestFullscreen({ navigationUI: "show" })
.then(() => {})
.catch((err) => {
alert(
`An error occurred while trying to switch into fullscreen mode: ${err.message} (${err.name})`,
);
});
Promise 的解析处理程序不执行任何操作，但如果 Promise 被拒绝，则通过调用 alert() 显示错误消息。
使用屏幕选项
如果您想在主操作系统屏幕上全屏显示元素，可以使用以下代码：
try {
const primaryScreen = (await getScreenDetails()).screens.find(
(screen) => screen.isPrimary,
);
await document.body.requestFullscreen({ screen: primaryScreen });
} catch (err) {
console.error(err.name, err.message);
}
Window.getScreenDetails() 方法用于检索当前设备的 ScreenDetails 对象，该对象包含表示不同可用屏幕的 ScreenDetailed 对象。
规范
| 规范 |
|---|
| Fullscreen API # ref-for-dom-element-requestfullscreen① |
浏览器兼容性
加载中…