요소 전체화면을 이용한 설정 및 모니터링 방법

다음 편집기는 요소 전체 화면을 설정하고 모니터링하는 예를 제공하며 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 편집기를 따라 살펴보겠습니다

전체 화면 설정 및 전체 화면 종료

//全屏设置
 $('#fullScreen').on('click', function () {
  fullScreen();
 });
 //退出全屏
 $('#exitFullScreen').on('click', function () {
  exitFullScreen();
 });
 //进入全屏
function fullScreen() {
 var obj = document.getElementById('editMark');
 if (obj.requestFullScreen) {
  obj.requestFullScreen();
 } else if (obj.webkitRequestFullScreen) {
  obj.webkitRequestFullScreen();
 } else if (obj.msRequestFullScreen) {
  obj.msRequestFullScreen();
 } else if (obj.mozRequestFullScreen) {
  obj.mozRequestFullScreen();
 }
}

function exitFullScreen() {
 var obj = document.getElementById('editMark');
 if (document.exitFullscree) {
  document.exitFullscree();
 } else if (document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
 } else if (document.msExitFullscreen) {
  document.msExitFullscreen();
 } else if (document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
 }
}

전체 화면 이벤트 듣기

//监听全屏
 document.addEventListener('fullscreenchange', function () {
  if (document.fullscreenElement) {
   alert(1);
  } else {
   alert(2);
  }
 }, false);
 document.addEventListener('msfullscreenchange', function () {
  if (document.msFullscreenElement) {
   alert(1);
  } else {
   alert(2);
  }
 }, false);
 document.addEventListener('mozfullscreenchange', function () {
  if (document.mozFullScreen) {
   alert(1);
  } else {
   alert(2);
  }
 }, false);
 document.addEventListener('webkitfullscreenchange', function () {
  if (document.webkitIsFullScreen) {
   alert(1);
  } else {
    alert(2);
  }
 }, false);

위 내용은 모두를 위해 정리한 내용입니다. 미래.

관련 기사:

vuex에서 유휴 상태를 재설정하는 방법

Angular5를 사용하여 서버 측 렌더링 구현

JavaScript에서 고급 기능을 사용하는 방법

nodejs 함수를 사용하여 채팅을 구현하는 방법

위 내용은 요소 전체화면을 이용한 설정 및 모니터링 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!