This is the sixth day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

The Fullscreen API provides a way to make web pages or page elements Fullscreen and provides corresponding event responses

We usually only use full-screen mode when viewing render media elements such as images, videos, maps, etc. But broadly speaking, we can use the Fullscreen API to put any element in or out of full-screen mode.

Enter the full screen

The Fullscreen API provides a method called requestFullscreen() that enables the browser to turn on full-screen mode. This method returns a Promise instance. The Promise instance executes the corresponding Resolve method after full-screen mode is activated

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
</head>
<body>
  <iframe
  src="https://www.google.com/maps/embed?pb=! 1m18! 1m12! 1m3! 1 d63371. 815297074514! 2 d79. 82118589335941! 3 d6. 921837369631892! 2m3! 1f0! 2f0! 3f0! 3m2! 1i1024! 2i768! 4 f13. 1! 3m3! 1m2! 1s0x3ae253d10f7a7003%3A0x320b2e4d32d3838d! 2sColombo! 5e0! 3m2! 1sen! 2slk! 4v1631946473215! 5m2! 1sen! 2slk"
  width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" id="map"></iframe>

  <br>

  <button id="fullscreen">fullscreen</button>

  <script>
    const map = document.getElementById('map')
    const fullBtn = document.getElementById('fullscreen')

    fullBtn.addEventListener('click'.() = > {
      // We can put the entire document in full-screen mode
      // document.documentElement.requestFullscreen()

      // We can also set an element to full-screen mode
      map.requestFullscreen()
    })
  </script>
</body>
</html>
Copy the code
fullBtn.addEventListener('click'.() = > {
  The requestFullscreen method returns a promise
  // The corresponding resolve method is executed after entering full screen
  map.requestFullscreen().then(() = > console.log('Map goes into full screen mode'))})Copy the code

Exit full screen

Exiting full-screen mode is straightforward, as the user can exit full-screen mode using the Esc key or any other normal method.

However, if you want to exit full-screen mode when you click the button, you can use the exitFullscreen() method.

ExitFullscreen () is a document method that does not exist on a specific element

exitBtn.addEventListener('click'.() = > {
  document.exitFullscreen()
})
Copy the code

Full screen switch

In the Fullscreen API, there is no way to switch directly between full-screen mode and window mode.

However, using requestFullscreen and exitFullscreen methods can easily achieve full screen switch

toggleBtn.addEventListener('click'.() = > {
  The // fullscreenEnabled property checks whether the browser supports full-screen mode and whether the user is authorized.
  if (document.fullscreenEnabled) {
    // The fullscreenElement property returns the element currently in full-screen mode
    // If no element is in full-screen mode, it returns null
    if (document.fullscreenElement) {
      document.webkitExitFullscreen()
    } else {
      document.documentElement.webkitRequestFullscreen()
    }
  }
})
Copy the code

Listen for a full screen switch

// The Fullscreen API provides fullScreenChange events for document elements or plain tag elements
// When a page element enters or leaves full-screen mode, the corresponding callback function is triggered
document.addEventListener('fullscreenchange'.() = > {
  console.log(document.fullscreenElement ? 'Full screen' : 'Out of full screen')})Copy the code

: fullscreen

The :fullscreen pseudo-element adds a specific style to the full-screen element. When the user enters full-screen mode, styles are applied to the UI.

We can also use the :not(:fullscreen) pseudo-element to style elements that are not in fullscreen

p:fullscreen {
  color: red;
}

p:not(:fullscreen) {
  color: blue;
}
Copy the code

Note: the fullscreen pseudo-element is triggered only when the p element is in fullscreen

The :fullscreen pseudo-element on the p element is not triggered when the rest of the elements go fullscreen

: : backdrop

We can set the :: Backdrop element to set the state of the background when the element is full screen

p:fullscreen {
  color: red;
}

p::backdrop {
  /* p In full screen mode, background color transparent */
  opacity: 0;
}
Copy the code

reference

  • Building FullScreen Web Apps

  • Build a full-screen web application