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
반응형
'Front-end' 카테고리의 다른 글
| [HTML/CSS] 웹접근성 인증 홈페이지 퍼블리싱 하기 (1) | 2022.11.25 |
|---|---|
| [jQuery] 디데이 표시하기 (날짜 카운트다운) - The Final Countdown 예제 (0) | 2022.11.03 |
| [jQuery] 가로 스크롤 탭 메뉴 만들기 (0) | 2022.09.27 |
| [React] 리액트로 Three.js 작업하기 기본 (3D 박스 구현) (0) | 2022.07.25 |
| [Javascript] THREE.JS 3D 정육면체에 여러 이미지 적용하기 (textureLoader) (0) | 2022.07.22 |
