Element: fullscreenchange 事件
当一个 Element 进入或退出全屏模式后，会立即触发 fullscreenchange 事件。
此事件将发送到正在进行全屏模式转换的 Element。
要确定 Element 是进入还是退出全屏模式，请检查 Document.fullscreenElement 的值：如果此值为 null，则表示元素正在退出全屏模式；否则，表示元素正在进入全屏模式。
此事件不可取消。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("fullscreenchange", (event) => { })
onfullscreenchange = (event) => { }
事件类型
一个通用的 Event。
示例
在此示例中，将一个 fullscreenchange 事件的处理器添加到 ID 为 fullscreen-div 的元素上。
如果用户点击“切换全屏模式”按钮，click 处理器将为 div 切换全屏模式。如果 document.fullscreenElement 有值，则退出全屏模式。否则，该 div 将进入全屏模式。
请记住，在处理 fullscreenchange 事件时，元素的当前状态已经改变。因此，如果状态是进入全屏模式，document.fullscreenElement 将指向当前处于全屏模式的元素。另一方面，如果 document.fullscreenElement 为 null，则表示已取消全屏模式。
这意味着对于示例代码而言，如果某个元素当前处于全屏模式，fullscreenchange 处理器会将全屏元素的 id 记录到控制台。如果 document.fullscreenElement 为 null，则代码会记录一条消息，表明正在离开全屏模式。
HTML
html
<h1>fullscreenchange event example</h1>
<div id="fullscreen-div">
<button id="toggle-fullscreen">Toggle Fullscreen Mode</button>
</div>
JavaScript
js
function fullscreenchangeHandler(event) {
// document.fullscreenElement will point to the element that
// is in fullscreen mode if there is one. If not, the value
// of the property is null.
if (document.fullscreenElement) {
console.log(
`Element: ${document.fullscreenElement.id} entered fullscreen mode.`,
);
} else {
console.log("Leaving fullscreen mode.");
}
}
const el = document.getElementById("fullscreen-div");
el.addEventListener("fullscreenchange", fullscreenchangeHandler);
// or
el.onfullscreenchange = fullscreenchangeHandler;
// When the toggle button is clicked, enter/exit fullscreen
document
.getElementById("toggle-fullscreen")
.addEventListener("click", (event) => {
if (document.fullscreenElement) {
// exitFullscreen is only available on the Document object.
document.exitFullscreen();
} else {
el.requestFullscreen();
}
});
规范
| 规范 |
|---|
| Fullscreen API # handler-document-onfullscreenchange |
浏览器兼容性
加载中…