JS 监听 F11 触发全屏事件的简单代码示例

在网页开发中，有时我们需要监听用户按下 F11 键触发全屏的操作，并执行相应的处理逻辑。下面将为您展示一个简单的 JavaScript 代码示例，用于实现这一功能。

我们需要在页面加载完成后添加事件监听器。以下是相应的代码：

document.addEventListener("keydown", function(event) {
  if (event.keyCode === 122) {  // 122 是 F11 键的键码
    // 在这里编写全屏触发后的处理逻辑
    console.log("全屏已触发");
  }
});

在上述代码中，我们使用 addEventListener 方法为 keydown 事件添加了一个监听器。当用户按下键盘上的键时，该监听器会被触发。通过判断键码是否为 122（即 F11 键的键码），来确定是否触发了全屏操作。

接下来，假设我们希望在全屏触发后，更改页面的背景颜色为红色，可以这样修改代码：

document.addEventListener("keydown", function(event) {
  if (event.keyCode === 122) {
    document.body.style.backgroundColor = "red";
  }
});

当然，这只是一个简单的示例，您可以根据实际需求在全屏触发后执行更复杂的操作，比如调整页面布局、显示特定的元素或执行与全屏状态相关的业务逻辑。

需要注意的是，不同的浏览器对于全屏操作的支持和限制可能会有所不同。在实际应用中，可能需要进一步处理兼容性问题，以确保在各种主流浏览器中都能正常工作。

全屏操作可能会涉及到用户体验和安全性方面的考虑。确保您的应用在全屏状态下仍然提供清晰的交互方式，并且不会给用户带来不必要的困扰或风险。

通过上述简单的 JavaScript 代码，我们可以实现对 F11 触发全屏事件的监听，并根据具体需求进行相应的处理，为用户提供更加个性化和友好的网页体验。