JavaScript에서 전체 화면 창 가져오기

Kushank Singh 2023년10월12일

JavaScript

이 튜토리얼에서는 JavaScript를 사용하여 전체 화면 창을 얻는 방법을 배웁니다.

전체 화면 API는 JavaScript 코드를 사용하여 웹 페이지를 전체 화면 모드로 변환하는 데 도움이 됩니다. 전체 문서 또는 개별 요소에 적용할 수 있습니다.

아래의 예를 확인하십시오.

function getFullscreenElement() {
  return document.fullscreenElement        // standard property
      || document.webkitFullscreenElement  // safari/opera support
      || document.mozFullscreenElement     // firefox support
      || document.msFullscreenElement;     // ie/edge support
}
function toggleFullscreen() {
  if (getFullscreenElement()) {
    document.exitFullscreen();
  } else {
    document.getElementById('container')
        .getFullscreenElement()
        .catch(console.log);
  }
}

위의 코드에서 getFullscreenElement() 함수에는 document.fullscreenElement, document.webkitFullscreenElement, document.mozFullscreenElement, document.msFullscreenElement와 같이 전체 화면을 만드는 4가지 다른 옵션이 있습니다. 거의 모든 브라우저와 호환되는 명령.

toggleFullscreen()은 전체 화면 모드가 아닌 전체 화면 모드로 창을 전환하고 Enter Full-Screen 버튼을 클릭하여 그 반대의 경우도 마찬가지입니다. 다음과 같은 방식으로 주어진 요소에 대해 이 함수를 호출할 수 있습니다.

document.getElementById('button').addEventListener('click', () => {
  toggleFullscreen();