📌  相关文章
📜  HTML | DOM fullscreenchange 事件(1)

📅  最后修改于: 2023-12-03 15:31:11.826000             🧑  作者: Mango

HTML | DOM fullscreenchange 事件

HTML DOM FullscreenChange 事件是在用户进入或离开全屏模式时触发的事件。

该事件通常与Fullscreen API连用，用于检测浏览器的全屏状态并进行相应的操作。

用法
监听全屏状态变化事件

以下是监听 FullscreenChange 事件的基本语法：

document.addEventListener("fullscreenchange", fullScreenHandler);
FullscreenChange事件属性

FullscreenChange 事件主要用于检测全屏状态的变化，具有以下属性：

  • fullscreenElement：表示当前处于全屏状态的元素。
  • isFullscreen：表示当前是否处于全屏状态，是布尔类型，为true表示是，为false表示否。
  • oldFullscreenElement：表示之前处于全屏状态的元素。
例子

以下简单的代码片段说明了如何使用 FullscreenChange 事件：

<!DOCTYPE html>
<html>
<head>
	<title>DOM FullscreenChange 事件示例</title>

	<script>
		function fullScreenHandler() {
			if (document.fullscreenElement) {
				console.log('现在处于全屏模式！');
			} else {
				console.log('现在退出全屏模式！');
			}
		}

		// 为 document 添加全屏状态监听
		document.addEventListener("fullscreenchange", fullScreenHandler);
	</script>
</head>
<body>
	<h1>DOM FullscreenChange 事件示例</h1>
	<p>点击下面的按钮，进入全屏模式。</p>
	<button onclick="document.documentElement.requestFullscreen()">进入全屏</button>
	<p>点击下面的按钮，退出全屏模式。</p>
	<button onclick="document.exitFullscreen()">退出全屏</button>
</body>
</html>
浏览器兼容性

FullscreenChange 事件在各大主流浏览器中均有很好的兼容性，包括：

  • Chrome
  • Firefox
  • Edge
  • Safari
总结

FullscreenChange 事件是与 Fullscreen API 搭配使用的重要事件之一，用于检测全屏状态的变化。它不仅具有广泛的浏览器兼容性，而且使用方便简单，可以轻松地实现全屏操作时相应的交互反馈。