Front-end

[Javascript] 전체화면 켜는 버튼 만들기 How to - fullscreen

셀킴 2022. 11. 3. 16:05
728x90
반응형

출처 https://www.w3schools.com/howto/howto_js_fullscreen.asp

 

Fullscreen with JavaScript

Note: Internet Explorer 10 and earlier versions do not support the msRequestFullscreen() method.

전체화면을 켜기/끄기 버튼 코드이다.

:fullscreen {}을 통해 전체화면일때 적용되는 css를 작성할 수도 있음.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:-webkit-full-screen {background-color: #E0D1E8;}
:-ms-fullscreen{background-color: #E0D1E8;}
:fullscreen {background-color: #E0D1E8;}
.btn_fullsc {
  padding: 20px;
  font-size: 20px;
  font-family:sans-serif;
  border:2px dotted #E0D1E8;
}
:fullscreen .btn_fullsc {
  border:2px dotted #fff;
  background-color:rgba(255,255,255,0.1);
}
</style>
</head>
<body>

<h2>Fullscreen with JavaScript</h2>
<button class="btn_fullsc" onclick="openFullscreen();">전체화면 켜기</button>
<button class="btn_fullsc" onclick="closeFullscreen();">전체화면 끄기</button>

<script>
var elem = document.documentElement;
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

<p>Note: Internet Explorer 10 and earlier versions do not support the msRequestFullscreen() method.</p>

</body>
</html>

 

Note에 적힌대로 IE10 이전버전에서는 해당 기능을 지원하지않는다.

728x90
반응형