Element:fullscreenchange 事件
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
fullscreenchange
事件会在浏览器进入或退出全屏模式后立即触发。
该事件被发送到正在进入或退出全屏模式的 Element
。
要确定 Element
是进入还是退出全屏模式,请检查 Document.fullscreenElement
的值:如果此值为 null
,则表示该元素正在退出全屏模式,否则表示该元素正在进入全屏模式。
此事件不能被取消。
语法
在类似于 addEventListener()
之类的方法中使用事件名称,或设置事件处理器属性。
addEventListener("fullscreenchange", (event) => {});
onfullscreenchange = (event) => {};
事件类型
通用的 Event
。
示例
在此示例中,向 ID 为 fullscreen-div
的元素添加了 fullscreenchange
事件处理器。
如果用户单击“切换全屏模式”按钮,click
处理器将切换 div
的全屏模式。如果 document.fullscreenElement
具有值,则会退出全屏模式。否则,div 将被置于全屏模式。
请记住,在处理 fullscreenchange
事件时,元素的状态已经发生了变化。因此,如果更改是进入全屏模式,document.fullscreenElement
将指向现在处于全屏模式的元素。另一方面,如果 document.fullscreenElement
为 null
,则全屏模式已被取消。
对于示例代码,这意味着,如果元素当前处于全屏模式,则 fullscreenchange
处理器在控制台中打印全屏元素的 id
。如果 document.fullscreenElement
为 null
,则代码记录消息表示更改是退出全屏模式。
HTML
<h1>fullscreenchange 事件示例</h1>
<div id="fullscreen-div">
<button id="toggle-fullscreen">切换全屏模式</button>
</div>
JavaScript
function fullscreenchanged(event) {
// 如果有元素处于全屏模式,则 document.fullscreenElement 将指向该元素。如果没有元素处于全屏模式,则该属性的值为 null。
if (document.fullscreenElement) {
console.log(`元素:${document.fullscreenElement.id} 进入全屏模式。`);
} else {
console.log("退出全屏模式。");
}
}
const el = document.getElementById("fullscreen-div");
el.addEventListener("fullscreenchange", fullscreenchanged);
// 或
el.onfullscreenchange = fullscreenchanged;
// 在切换按钮被点击时,将会进入或退出全屏模式
document
.getElementById("toggle-fullscreen")
.addEventListener("click", (event) => {
if (document.fullscreenElement) {
// exitFullscreen 方法只能在 Document 对象上使用。
document.exitFullscreen();
} else {
el.requestFullscreen();
}
});
规范
Specification |
---|
Fullscreen API Standard # handler-document-onfullscreenchange |
浏览器兼容性
BCD tables only load in the browser