js怎么手动退出全屏

手动退出全屏模式在JavaScript中可以通过调用相关的API来实现：Document.exitFullscreen()、Document.webkitExitFullscreen()、Document.mozCancelFullScreen()、Document.msExitFullscreen()。 这些方法根据不同的浏览器前缀来处理全屏退出。详细描述如何使用这些方法：你可以通过检测当前浏览器是否支持全屏退出的标准方法，然后调用相应的前缀方法来退出全屏。

一、JavaScript退出全屏的基本原理

JavaScript 提供了一些 API 来控制浏览器的全屏模式，这些 API 允许开发人员通过编程方式进入和退出全屏模式。全屏模式提供了一个无干扰的用户体验，特别适用于视频播放、游戏和其他互动内容。但有时我们需要手动退出全屏模式，下面是一些常用方法。

1、标准方法

现代浏览器大多支持标准的 Document.exitFullscreen() 方法来退出全屏模式。这个方法是异步的，返回一个 Promise。

if (document.fullscreenElement) {

    document.exitFullscreen().catch(err => {
        console.error(`Error attempting to exit fullscreen: ${err.message}`);
    });
}

2、浏览器前缀方法

在某些较旧的浏览器中，可能需要使用带有前缀的方法，如 webkitExitFullscreen、mozCancelFullScreen、msExitFullscreen。

function exitFullscreen() {

    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

二、检测全屏状态

在退出全屏之前，通常需要检测当前是否在全屏模式。可以通过检查 document.fullscreenElement 或其前缀版本来实现。

function isFullscreen() {

    return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
}

1、自动退出全屏

有时你可能希望在特定事件（如按键或点击）触发时自动退出全屏。以下示例展示了如何在按下 Escape 键时退出全屏：

document.addEventListener('keydown', (event) => {

    if (event.key === 'Escape' && isFullscreen()) {
        exitFullscreen();
    }
});

2、手动触发全屏退出

你也可以在某个按钮的点击事件中调用退出全屏的方法：

document.getElementById('exitFullscreenButton').addEventListener('click', () => {

    if (isFullscreen()) {
        exitFullscreen();
    }
});

三、跨浏览器兼容性

虽然现代浏览器已经很好地支持了全屏 API，但为了确保兼容性，最好还是处理各种浏览器前缀。以下是一个完整的跨浏览器退出全屏的函数：

function exitFullscreen() {

    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}
document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && isFullscreen()) {
        exitFullscreen();
    }
});
document.getElementById('exitFullscreenButton').addEventListener('click', () => {
    if (isFullscreen()) {
        exitFullscreen();
    }
});

四、应用场景

1、视频播放应用

在视频播放应用中，用户通常会选择全屏观看视频。当用户点击“退出全屏”按钮时，可以使用上述方法退出全屏模式。

document.getElementById('exitFullscreenButton').addEventListener('click', () => {

    if (document.fullscreenElement) {
        document.exitFullscreen();
    }
});

2、交互式游戏

在交互式游戏中，全屏模式可以提供更好的沉浸式体验。当玩家按下特定按键（如 Escape 键）时，可以退出全屏模式。

document.addEventListener('keydown', (event) => {

    if (event.key === 'Escape' && document.fullscreenElement) {
        document.exitFullscreen();
    }
});

五、注意事项

1、用户权限

请注意，出于安全和用户体验的考虑，浏览器通常不允许在没有用户交互的情况下自动进入或退出全屏模式。因此，上述方法通常需要绑定到用户触发的事件（如点击或按键）。

2、错误处理

在退出全屏模式时，可能会发生错误。例如，用户设备不支持全屏模式或当前页面没有进入全屏。在这种情况下，最好添加错误处理逻辑。

document.exitFullscreen().catch(err => {

    console.error(`Error attempting to exit fullscreen: ${err.message}`);
});

3、兼容性检查

在实际应用中，建议在使用全屏 API 之前进行兼容性检查，以确保代码能够在各种浏览器中正常运行。

if (document.exitFullscreen) {

    // 浏览器支持 exitFullscreen
}

总结：手动退出全屏模式在JavaScript中是一个常见的需求，通过使用标准的 Document.exitFullscreen() 方法和处理各种浏览器前缀，可以确保代码在各种浏览器中都能正常运行。根据具体应用场景，您可以将退出全屏功能绑定到按键事件或按钮点击事件，以提供更好的用户体验。

相关问答FAQs：

1. 如何在JavaScript中手动退出全屏模式？
在JavaScript中，可以使用document.exitFullscreen()方法手动退出全屏模式。该方法将会将当前正在全屏显示的元素退出全屏，并使页面恢复到正常的窗口模式。

2. 我如何通过JavaScript代码使网页从全屏模式返回到正常模式？
您可以在JavaScript中使用以下代码来实现网页从全屏模式返回到正常模式的切换：

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

3. 如何在JavaScript中检测当前是否处于全屏模式？
您可以使用以下代码来检测当前是否处于全屏模式：

function isFullscreen() {
  return (
    document.fullscreenElement ||
    document.mozFullScreenElement ||
    document.webkitFullscreenElement ||
    document.msFullscreenElement
  );
}

通过调用isFullscreen()函数，您可以获得一个布尔值，表示当前是否处于全屏模式。如果返回true，则表示正在全屏显示，如果返回false，则表示不在全屏模式下。