집 > 기사 > 웹 프론트엔드 > JS 전체 화면 및 전체 화면 종료(코드 포함)에 대한 자세한 설명

JS 전체 화면 및 전체 화면 종료(코드 포함)에 대한 자세한 설명

亚连원래의: 2018-05-19 14:20:229181검색

전체화면 나가기 효과와 전체화면 효과 영상사이트에서 많이 볼 수 있는 내용인데, 여기에서는 js 전체화면 사용과 전체화면 종료 코드 예시를 소개해드리겠습니다

JS 전체 화면 및 전체 화면 종료

js는 브라우저 창의 전체 화면 기능을 구현하고 전체 화면 기능을 종료합니다. Google, Firefox, 360 등 시중의 주요 브라우저는 모두 호환되지만 하위 버전입니다. IE 버전에는 몇 가지 결함이 있습니다(전체 화면 상태에서도 여전히 하단 상태 표시줄이 있음).

기본적으로는 이 데모만으로도 충분합니다. 아래 소스 코드를 복사하여 html 파일로 저장하면 효과를 확인할 수 있습니다.

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js全屏和退出全屏代码</title>
<body>
<!-- requestFullScreen(document.documentElement): 整个网页进入全屏
  requestFullScreen(document.getElementById("video-box")): 指定某块区域全屏
 -->
<button onclick="requestFullScreen(document.documentElement)">全屏显示</button>
<button onclick="exitFull()">退出全屏</button>
</body>
<script type="text/javascript">
function requestFullScreen(element) {
 // 判断各种浏览器，找到正确的方法
 var requestMethod = element.requestFullScreen || //W3C
 element.webkitRequestFullScreen || //Chrome等
 element.mozRequestFullScreen || //FireFox
 element.msRequestFullScreen; //IE11
 if (requestMethod) {
  requestMethod.call(element);
 }
 else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
  var wscript = new ActiveXObject("WScript.Shell");
  if (wscript !== null) {
   wscript.SendKeys("{F11}");
  }
 }
}

//전체 화면 종료 브라우저 유형 결정

function exitFull() {
 // 判断各种浏览器，找到正确的方法
 var exitMethod = document.exitFullscreen || //W3C
 document.mozCancelFullScreen || //Chrome等
 document.webkitExitFullscreen || //FireFox
 document.webkitExitFullscreen; //IE11
 if (exitMethod) {
  exitMethod.call(document);
 }
 else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
  var wscript = new ActiveXObject("WScript.Shell");
  if (wscript !== null) {
   wscript.SendKeys("{F11}");
  }
 }
}
</script>
</html>

전체 화면 브라우저에서는 일반적으로 단축키 F11을 누르는 것으로 알고 있습니다. JS가 브라우저의 전체 화면을 제어하는 것은 드문 일이 아닙니다. 이는 웹 애플리케이션을 기본 소프트웨어 애플리케이션처럼 보이게 만듭니다. 예를 들어 주문 시스템, 호출 시스템 등이 있습니다.

JS를 사용하여 브라우저를 전체 화면으로 만들고 전체 화면을 종료하는 방법은 여러 가지가 있습니다. 중요한 점은 브라우저 전체 화면이 마우스 제스처 클릭 이벤트에 의해서만 실행될 수 있다는 점입니다.

JS 전체 화면 방법

var $fullScreen = document.getElementById("js-fullScreen");//按钮 
if ($fullScreen) { 
  $fullScreen.addEventListener("click", function () { 
    var docElm = document.documentElement; 
    if (docElm.requestFullscreen) { 
      docElm.requestFullscreen(); 
    } 
    else if (docElm.msRequestFullscreen) { 
      docElm.msRequestFullscreen(); 
    } 
    else if (docElm.mozRequestFullScreen) { 
      docElm.mozRequestFullScreen(); 
    } 
    else if (docElm.webkitRequestFullScreen) { 
      docElm.webkitRequestFullScreen(); 
    } 
  }, false); 
}

JS 전체 화면 종료 방법

var $cancelFullScreen = document.getElementById("js-cancelFullScreen"); 
if ($cancelFullScreen) { 
  $cancelFullScreen.addEventListener("click", function () { 
    if (document.exitFullscreen) { 
      document.exitFullscreen(); 
    } 
    else if (document.msExitFullscreen) { 
      document.msExitFullscreen(); 
    } 
    else if (document.mozCancelFullScreen) { 
      document.mozCancelFullScreen(); 
    } 
    else if (document.webkitCancelFullScreen) { 
      document.webkitCancelFullScreen(); 
    } 
  }, false); 
}

콘솔 경고

'요소'에서 'requestFullscreen' 실행 실패: API는 사용자만 시작할 수 있습니다. 제스처 .

설명: "요소"에서 "requestFullscreen" 메소드 실행에 실패했습니다. 자바스크립트 API는 제스처를 통해서만 생성을 허용합니다! (즉, 권한 없음)

일반적으로 프로그래머가 브라우저를 실행하여 자동으로 전체 화면을 표시하려고 할 때 발생합니다. 하지만 죄송합니다. 이 메서드는 동작을 통해 생성되어야 합니다. onload, Trigger() 및 mouseover도 트리거될 수 없습니다.

공식 설명

Element.requestFullscreen() 메서드는 요소가 전체 화면으로 표시되도록 비동기 요청을 발행합니다. 그러나 요소가 전체 화면 모드로 전환된다는 보장은 없습니다.

전체 화면 모드가 허용되면 문서는 전체 화면 모드임을 알리는 전체 화면 변경 이벤트를 수신합니다. 권한이 거부되면 문서는 FullScreenError 이벤트를 수신합니다.

결론

아마도 사용자 경험을 위해 클라이언트 측 자바스크립트에서는 마우스 제스처 클릭 이벤트, 즉 click()을 통해서만 브라우저가 전체 화면이 되도록 허용합니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

JS 전체 화면 및 전체 화면 종료(코드 포함)에 대한 자세한 설명

관련 기사