元素：fullscreenchange 事件

有限可用性

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

fullscreenchange 事件在 Element 切换到或退出全屏模式后立即触发。

此事件发送到正在切换到或退出全屏模式的 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 fullscreenchanged(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", fullscreenchanged);
// or
el.onfullscreenchange = fullscreenchanged;

// 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();
    }
  });

规范

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

浏览器兼容性

BCD 表格只在浏览器中加载

另请参阅