requestFullscreen으로 요소를 가득 채우십시오.

거기에 넣어 보자. 이것은 자주 필요한 것이 아닙니다. 하지만, 알아두면 좋습니다. 우리가 자주 사용하거나 간과하지 않는 깔끔한 네이티브 API가 너무 많습니다.

Kent가 시작한 트윗 스레드 때문에 이것만 찾아봤습니다.






켄트 C. 도즈









아, 그리고 useLess라는 React 기반 css 전처리기는... useFull이 될 것 같습니다...


오후 14:03 - 2021년 1월 15일









그리고 React 후크useFull가 탄생했습니다! 😅

참고::Dev.to는 iframe에 대한 권한을 허용하지 않습니다fullscreen. 즉, 데모를 가지고 놀려면 CodePen에서 데모를 열어야 합니다 👍



요소를 전체 화면으로 만들기 위한 React 후크입니다.

그러나 이로 인해 Element API의 메서드requestFullscreen를 자세히 살펴보게 되었습니다.


캠프 TL;DR에 있는 사람들을 위해 requestFullscreen로 요소를 전체 화면으로 만들 수 있습니다(prefixes이 있습니다).

요청에는 어떤 형태의 사용자 제스처가 필요합니다. 그것 없이는 전체 화면을 요청할 수 없습니다.

이 데모를 가지고 놀아보세요!



참고::requestFullscreen 메서드에는 다른 접두사가 있습니다. 물론 그렇습니다! this article에 깔끔한 스크립트가 있습니다.

데모를 살펴보는 이 스크린캐스트를 확인할 수도 있습니다!

왜요?

진실. 자주 사용하실 물건은 아닙니다. 일반적인 사용 사례? 미디어, 문서 등을 표시합니다. YouTube 동영상 등을 생각합니다.

어떻게?

다음과 같이 간단합니다.

const makeFullscreen = () => {
  element.requestFullscreen()
}

이는 사용자 제스처의 결과로 발생해야 합니다. 예를 들어 버튼을 클릭한 결과로 요청을 할 수 있습니다.

BUTTON.addEventListener('click', makeFullscreen)

멋진 점은 무엇이든 전체 화면으로 만들 수 있다는 것입니다. dialog가 아닌 한 .

변경 감지

전체 화면 모드일 때 어떻게 감지합니까? 메서드는 Promise 를 반환합니다. 하지만 모든 브라우저에 있는 것은 아닙니다 🤦‍♂️

현재 가장 호환되는 방법은 fullscreenchange 에서 document 이벤트를 수신하는 것입니다. 그런 다음 document.fullscreenElement 가 있는지 확인합니다.

document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement)
    console.info('We are fullscreen!!!')
  else
    console.info('Do nothing...')
})

이렇게 하면 요소를 변경할 수 있는 깔끔한 후크가 제공됩니다. 예를 들어 다른 스타일을 적용할 수 있습니다. 위의 React 예제에서는 요소가 전체 화면 모드로 전환될 때 애니메이션을 트리거합니다. fullscreenchange 에서 클래스를 추가/제거하여 이 작업을 수행합니다.

퇴거

전체화면 모드에서 벗어나고 싶을 때

document.exitFullscreen()

그게 다야!

그게 전부입니다.

여기서 재미있는 점은 이것으로 무엇을 만들 수 있느냐는 것입니다. 그것을 가진 사람들에게 어떤 종류의 경험을 제공할 수 있습니까? 당신의 상상력은 당신을 어디로 데려가나요?

다른 어떤 멋진 브라우저 API를 가지고 놀 수 있습니까?

예를 들어 이 데모에서 입자 애니메이션은 버튼을 클릭할 때 발생합니다. 사용자에게 제공할 수 있는 "모의"화면 보호기와 같습니다!

참고::일부 비활성 후에 표시되는 전체 화면 화면 보호기를 생성할 수 없는 이유가 있습니다. 한가지 이유. 팝업을 생각해보세요!



굉장해!