Document: fullscreenchange 事件

有限可用性

此功能不是基线，因为它在一些最常用的浏览器中不起作用。

当浏览器切换到或退出全屏模式时，会立即触发 fullscreenchange 事件。

此事件将发送到正在进入或退出全屏模式的Element，然后此事件会冒泡到Document。

要确定Element是进入还是退出全屏模式，请检查Document.fullscreenElement的值：如果此值为null，则元素正在退出全屏模式，否则它正在进入全屏模式。

此事件不可取消。

语法

在方法中使用事件名称，例如addEventListener()，或设置事件处理程序属性。

js
addEventListener("fullscreenchange", (event) => {});

onfullscreenchange = (event) => {};

事件类型

一个通用的Event。

示例

记录fullscreenchange事件

在此示例中，为Document添加了fullscreenchange事件的处理程序。

如果用户单击“切换全屏模式”按钮，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>
  <pre id="logger"></pre>
</div>

CSS

css
* {
  box-sizing: border-box;
}

#fullscreen-div {
  height: 150px;
  padding: 1rem;
  background-color: pink;
}

#logger {
  height: 80px;
  padding: 0 0.5rem;
  background-color: white;
  overflow: scroll;
}

JavaScript

js
const logger = document.querySelector("#logger");
const fullScreenElement = document.querySelector("#fullscreen-div");

function log(message) {
  logger.textContent = `${logger.textContent}\n${message}`;
}

function fullscreenchanged(event) {
  // document.fullscreenElement will point to the element that
  // is in fullscreen mode if there is one. If there isn't one,
  // the value of the property is null.
  if (document.fullscreenElement) {
    log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
  } else {
    log("Leaving fullscreen mode.");
  }
}

document.addEventListener("fullscreenchange", fullscreenchanged);

// When the toggle button is clicked, enter/exit fullscreen
document.getElementById("toggle-fullscreen").addEventListener("click", () => {
  if (document.fullscreenElement) {
    // exitFullscreen is only available on the Document object.
    document.exitFullscreen();
  } else {
    fullScreenElement.requestFullscreen();
  }
});

规范

规范
全屏 API 标准
# handler-document-onfullscreenchange

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅