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 |
瀏覽器相容性
載入中…