手把手教你如何用js全屏API--Fullscreen API

全屏API是一个浏览器Web API，允许您为HTML元素启用全屏模式。它可以省去使用CSS和JavaScript实现全屏功能的麻烦。 全屏API的使用案例因今天的网站复杂性而变得更加丰富多彩。在本文中，将提供使用全屏API的全面指南。

先决条件

你应该具有使用HTML、DOM和JavaScript创建网页的基本知识。具体来说，您应该知道如何使用HTML元素、DOM选择器方法、事件侦听器和JavaScript对象。

全屏API基础知识

全屏API具有让您在全屏模式下显示元素的功能（主要是图像、媒体和图形元素）。没有它，你需要使用一些另外的CSS和JavaScript代码。

尽管全屏API可以在所有主要桌面和移动浏览器上使用，但有时最佳实践是使用某些属性的多个前缀版本（对于document.fullscreenElement有mozFullScreenElement用于Mozilla Firefox或webkitIsFullScreen）。如果您有任何疑问，可以在MDN上查看。

全屏API属性和方法

要成功使用全屏API，您需要熟悉其属性和方法。它们包括：

• element.requestFullscreen()：此方法告诉Web浏览器将指定元素设置为全屏模式。
• document.exitFullscreen()：此方法告诉Web浏览器退出元素的全屏模式并返回正常模式。
• document.fullscreenElement：此属性返回正在全屏显示的元素或检查全屏模式是否处于活动状态。空值表示没有元素处于全屏模式。
• document.fullscreenEnabled：此属性检查是否支持全屏模式。如果支持全屏模式，则返回true；如果不支持，则返回false。
• fullscreenchange事件：此事件用于检测全屏模式的更改。它可以用于创建一些功能，当全屏模式被激活和退出时。

如何使用全屏模式

实现此功能的第一步是请求全屏模式。可以使用requestFullscreen()方法。

这是请求全屏模式的代码：

js复制代码let image = document.querySelector('image.img'); 

image.requestFullscreen();

‌上面的代码将返回错误，因为全屏只能通过用户交互（例如单击、双击等）激活。

在下面的代码中，我们将使用单击事件来激活全屏模式。

js复制代码let image = document.querySelector('img.image');

image.addEventListener('click', function(e){
      image.requestFullscreen();
})

‌在上面的代码中，我使用了一个querySelector()方法来选择一个img元素。然后我附加了一个单击事件侦听器，以使图像在单击时全屏显示。

如何退出全屏模式

激活全屏模式后，需要exitFullscreen()方法退出全屏模式。

这是退出全屏模式的代码：

document.exitFullscreen();

在现实项目中，您需要用户与网页交互才能退出全屏。您需要一个事件侦听器来侦听用户交互，例如单击、双击、按键等。

以下是如何将事件侦听器与该exitFullscreen()函数一起使用：

js复制代码let image = document.querySelector('img.image'); 

image.addEventListener('click', function(e){ 
     image.requestFullscreen(); 
 }) 
 
 image.addEventListener('dblclick', function(e){ 
      document.exitFullscreen(); 
})

从上面的代码来看，当用户单击图像时，全屏模式就会被激活。当双击图像时，它会被停用。

如何检查全屏状态

要检查元素是否处于全屏模式，我们将使用该fullscreenElement属性。

值null表示它不处于全屏模式。

从上面的示例中，可以修改代码以根据属性的值激活和退出全屏模式fullscreenElement。

以下是如何使用该属性：

js复制代码image.addEventListener('click', function(e){ 

   if(document.fullscreenElement){ 
      document.exitFullscreen() 
   } else { 
     image.requestFullscreen();
   } 

})

从上面的代码中，已指示浏览器在单击图像时在全屏模式和正常模式之间切换。

事件处理和全屏状态

有时，可能希望在激活或退出全屏模式时进行一些更改（例如提醒用户）。

可以使用 'fullscreenchange' 事件，而不是使用 document.fullscreenElement 和多个事件处理程序来检查元素是否处于全屏状态。

这是代码：

js复制代码document.addEventListener('fullscreenchange', function(e){ 

   if(document.fullscreenElement){ 
      console.log('fullscreen mode activated');
   } else { 
      console.log('fullscreen mode deactivated'); 
   } 
   
})

从上面的代码来看，只要从任何元素激活或退出全屏模式，开发人员工具中就会显示 console.log() 消息。

如何将全屏应用于各种元素类型

尽管全屏可以应用于所有元素，但它最好用于媒体和交互式元素，例如 img、视频、iframe 和 canvas。

尽管用例很多，但我将解释其中的一些。

对于画布元素，如果正在构建在线游戏，它可以用于使您的游戏全屏显示。此外，如果您正在使用基于画布的图表库构建仪表板，则可以使用它在用户单击仪表板中的各个图表时使其全屏显示。

对于视频元素，如果正在为项目构建自定义视频播放器，则可以使用它来实现全屏功能。

对于图像元素，如果正在构建支持图像和视频上传的 Web 应用程序（例如社交媒体平台），则可以使用此 API 在元素上实现全屏模式。

对于 iframe、embed 和 object 元素，如果您正在构建图像到 pdf 转换器网站，可以使用此 API 使转换后的 PDF 全屏显示以供用户查看。

全屏 API 最佳实践和技巧

以下是全屏 API 的最佳实践和技巧：

1. 提供用户友好的进入和退出控件：如果您要在图像上实现全屏，则应在用户单击图像时激活它，并在用户双击或按退格按钮时退出。类似的用户友好方法可以用于视频和画布元素。另外，请确保在用户进入和退出全屏时通知用户。
2. 确保不支持的浏览器的后备选项：如果用户尝试从不支持的浏览器激活全屏，您应该提醒他们这种不兼容性。
3. 如果您在链接到外部源的 iframe 上使用全屏，请不要忘记设置该allow = 'fullscreen'属性。

html复制代码<button>fullscreen</button>
<iframe allow='fullscreen' src='https://external.com/content' width='500'  height='300'> </iframe> 
 
<script> 
    let button = document.querySelector('button'); 
    let iframe = document.querySelector('iframe'); 
    
    button.addEventListener('click', function (){  
       iframe.requestFullscreen();
    }) 
</script>

1. 鼠标事件（如 mouseover）和alert()函数可能会出现意外行为，因此不应在全屏 API 中使用它们。