Fullscreen API

Fullscreen API （全屏API）

Fullscreen API: Enabling Full-Screen Experiences in Web Applications

Fullscreen API: Enabling Full-Screen Experiences in Web Applications

The Fullscreen API is a web technology that allows web developers to create immersive and full-screen experiences within web applications. It enables users to view web content in a dedicated full-screen mode, enhancing the engagement and usability of web applications. In this article, we’ll explore what the Fullscreen API is, its benefits, how it works, and how to use it effectively in web development. （全屏API是一种Web技术，允许Web开发人员在Web应用程序中创建身临其境的全屏体验。它使用户能够以专用的全屏模式查看Web内容，从而增强Web应用程序的参与度和可用性。在本文中，我们将探讨什么是全屏API ，它的好处，它是如何工作的，以及如何在Web开发中有效地使用它。）

What is the Fullscreen API?

The Fullscreen API is a JavaScript API that provides developers with the capability to toggle web content into a full-screen mode, covering the entire viewport of the user’s device. This mode offers a distraction-free and immersive experience by removing browser chrome, such as address bars and toolbars, and maximizing the use of screen real estate for the web application’s content. （全屏API是一种JavaScript API ，它为开发人员提供了将Web内容切换为全屏模式的功能，覆盖了用户设备的整个视口。此模式通过删除浏览器chrome （如地址栏和工具栏） ，并最大限度地利用Web应用程序内容的屏幕空间，提供无干扰和身临其境的体验。）

Benefits of the Fullscreen API

Enhanced User Experience By utilizing the Fullscreen API, web developers can create engaging and immersive experiences that captivate users’ attention, particularly for multimedia presentations, videos, games, and applications requiring a focused view. Improved Usability The API simplifies the user experience by allowing users to enter and exit full-screen mode seamlessly, enhancing usability for applications that benefit from a larger canvas. （增强用户体验 通过使用全屏API ， Web开发人员可以创建吸引用户注意力的引人入胜的沉浸式体验，特别是对于需要集中视图的多媒体演示文稿、视频、游戏和应用程序。 改进的可用性 API允许用户无缝进入和退出全屏模式，从而简化了用户体验，增强了受益于更大画布的应用程序的可用性。） Consistency Across Devices The Fullscreen API provides a standardized way to enable full-screen mode across various devices and browsers, ensuring a consistent user experience. Customization and Control Developers can customize the full-screen experience to fit the application’s requirements, such as automatically entering full-screen mode when viewing media content or enabling full-screen mode as an option in settings. （跨设备的一致性 全屏API提供了一种标准化的方式，可在各种设备和浏览器上启用全屏模式，确保一致的用户体验。 自定义和控制 开发人员可以自定义全屏体验以满足应用程序的要求，例如在查看媒体内容时自动进入全屏模式或在设置中启用全屏模式作为选项。）

How the Fullscreen API Works

The Fullscreen API introduces several methods and properties that enable developers to interact with and control full-screen mode. Some of the key components include:

  1. document.fullscreenEnabled Property （1. document.fullscreenEnabled属性）

The document.fullscreenEnabled property is a read-only property that indicates whether full-screen mode is available in the current environment. Developers can check this property to determine if the Fullscreen API is supported. （Document.fullscreenEnabled属性是一个只读属性，用于指示当前环境中是否可以使用全屏模式。开发人员可以检查此属性以确定是否支持全屏API。）

  1. element.requestFullscreen() Method （2. element.requestFullscreen ()方法）

The element.requestFullscreen() method allows developers to request that an HTML element, such as a ‘< div >’ or ‘< video >’, be displayed in full-screen mode. Once called, the specified element will occupy the entire screen.

const fullscreenElement = document.getElementById('myElement');
fullscreenElement.requestFullscreen();
  1. document.exitFullscreen() Method （3. document.exitFullscreen ()方法）

The document.exitFullscreen() method allows developers to exit full-screen mode, returning the content to the normal document flow. （Document.exitFullscreen ()方法允许开发人员退出全屏模式，将内容返回到正常文档流。）

document.exitFullscreen();
  1. document.fullscreenElement Property （4. document.fullscreenElement属性）

The document.fullscreenElement property is a read-only property that returns the element currently displayed in full-screen mode. It can be used to check whether an element is in full-screen mode. （Document.fullscreenElement属性是一个只读属性，它返回当前以全屏模式显示的元素。它可用于检查元素是否处于全屏模式。）

if (document.fullscreenElement) {
 // An element is in full-screen mode
} else {
 // Full-screen mode is not active
}

Using the Fullscreen API

Here’s a basic example of how to use the Fullscreen API to enable full-screen mode for a specific HTML element:

const fullscreenButton = document.getElementById('fullscreenButton');
const fullscreenElement = document.getElementById('myElement');

fullscreenButton.addEventListener('click', () => {
 if (document.fullscreenEnabled) {
   fullscreenElement.requestFullscreen();
 }
});

In this example:

  • We select a button element (fullscreenButton) and an HTML element (myElement) that we want to display in full-screen mode. （-我们选择要在全屏模式下显示的按钮元素（ fullscreenButton ）和HTML元素（ myElement ）。）

  • We add a click event listener to the button, and when clicked, we check if full-screen mode is supported (document.fullscreenEnabled). If supported, we request that myElement be displayed in full-screen mode using requestFullscreen(). （-我们在按钮上添加了一个点击事件监听器，单击后，我们会检查是否支持全屏模式(document.fullscreenEnabled)。如果支持，我们请求使用requestFullscreen ()以全屏模式显示myElement。）

By following this approach, web developers can provide users with a seamless full-screen experience, making their applications more engaging and user-friendly. （通过这种方法， Web开发人员可以为用户提供无缝的全屏体验，使他们的应用程序更具吸引力和用户友好性。）

Conclusion

The Fullscreen API is a valuable tool for web developers looking to create immersive and distraction-free full-screen experiences within their web applications. Whether for multimedia presentations, interactive games, or applications requiring a focused view, the API enables developers to enhance user engagement and usability by maximizing screen real estate. By understanding and effectively implementing the Fullscreen API, developers can create web applications that deliver captivating and immersive experiences to their users.

← Console API
Validation API →

请遵守《互联网环境法规》文明发言，欢迎讨论问题
扫码反馈

扫一扫，反馈当前页面

咨询反馈
扫码关注
返回顶部