随着 HTML5 的普及，Web 开发越来越注重用户体验。全屏模式是提高用户体验的一种方式，可以让用户更加专注于当前展示的内容。然而，在全屏模式下，如果用户想要退出全屏，我们需要检测到这个操作并做出相应的处理。本文将介绍如何检测页面退出全屏模式，并提供代码示例。
全屏模式 API
在介绍如何检测页面退出全屏模式之前，我们先来了解一下全屏模式 API。HTML5 标准提供了 requestFullscreen() 方法，用于请求当前元素进入全屏模式。同时，也提供了 exitFullscreen() 方法，用于退出全屏模式。除此之外，还有其他几个相关的 API：
fullscreenEnabled：返回布尔值，表示当前浏览器是否支持全屏模式。fullscreenElement：返回正在全屏显示的元素，如果没有元素处于全屏状态，则返回 null。fullscreenchange事件：当元素进入或退出全屏模式时触发。通过监听该事件，可以实现对全屏状态变化的检测。fullscreenerror事件：当元素进入全屏模式失败时触发。
检测页面退出全屏模式
为了检测页面退出全屏模式，我们需要监听 fullscreenchange 事件。当元素从全屏状态切换到非全屏状态时，该事件会被触发。下面是一个简单的示例：
document.addEventListener('fullscreenchange', () => {
if (!document.fullscreenElement) {
console.log('退出全屏');
}
});在上面的代码中，我们通过监听 fullscreenchange 事件来检测是否退出了全屏模式。当 fullscreenElement 的值为 null 时，表示当前没有元素处于全屏状态，即页面已经退出全屏。
完整代码示例
下面是一个完整的代码示例，可以实现进入和退出全屏模式，并监听全屏状态的变化。请注意，在不同浏览器中，全屏模式 API 的使用可能存在差异，请仔细测试以确保兼容性。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------
-------
------
---------------
------- --------------------------------
------- ---------------------- --------------- --------------------
--------
----- ------------- - -----------------------------------------
----- ----------------- - ---------------------------------------------
----- ------- - -----------------------------------
--------------------------------------- -- -- -
----- ---- - -------------------------
-- ------------------------ -
-------------------------
- ---- -- ------------------------------ - -- ------ --
-------------------------------
- ---- -- -------------------------- - -- ---- --
---------------------------
-
--------------------------- - -------
------------------------------- - --------
---
------------------------------------------- -- -- -
-- ------------------------- -
--------------------------
- ---- -- ------------------------------- - -- ------ --
--------------------------------
- ---- -- --------------------------- - -- ---- --
----------------------------
-
--------------------------- - --------
------------------------------- - -------
---
--------------------------------------------- -- -- -
-- ----------------------------- -
--------------------------- - --------
------------------------------- - -------
--------------------
- ---- -
--------------------------- - -------
----
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------