개발/코딩관련

크롬 전체화면

Ddil_ 2020. 1. 23. 16:15

크롬은 전체화면을 막고있다. 전체화면하려해도 수초 안에 다시 돌아온다.

하지만, 360영상을 카드보드로 보려할때 핸드폰에서 전체화면이 안되면 상당히 거슬린다.

1. 시행착오

뭔가 스크립트로 전체화면을 유지하려 시도했는데 제대로 되지 않았다. 그렇다고 크롬을 쓰지말라고 할 수도 없고..

거기다 pc와 안드, ios 크롬어플에서도 다 되어야하기 때문에 더 골치가 아팟다.

그런데 순간, f11누르는거랑 같은 기능을 하면 되는거 아닌가?!?!?!?!?!

2. 직접 해보자

// 엔터 누를경우 f11누른것과 같은 이벤트를 발생시킨다.
document.addEventListener("keydown", function(e) {
      if (e.keyCode == 13) {
        toggleFullScreen();
      }
    }, false);

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
  }
}

위 소스는 엔터인데 나는 전체화면 버튼을 만들어서 그 버튼과 연결시켰다.

윈도우 크롬79버전에서 잘된다. 안드로이드 크롬79버전에서도 잘 된다. ios는 전체화면 버튼 자체가 안보인다. 아이폰 크롬어플에서는 전체화면 기능을 아예 제공하지 않는 듯 하다.

 

좌 : 일반화면 우 : 전체화면

 

3. 개선사항

추후 360동영상 피드백 및 버그가 어느정도 잡히면 그 이후에 ios는 더 찾아봐야할 것 같다.

 

4. 2020년 9월 추가

크롬버전이 높아지면서 아예 전체화면이 다 막혔다. 꼼수로 위와같이 됐었는데 현재는 안된다.

크롬에선 전체화면 할 방법이 없고, 전체화면과 비슷하게 하려면 팝업을 띄우되, 화면크기 꽉차게 팝업을 띄우는 수 밖에 없다.

 

크롬에서 보안상의 이유와 사용자가 이벤트 하기 전에 행동이 발생하는 것 등등 제한이 빡쎄지고 있어서 어쩔수 없다. 다른 브라우저들도 크롬을 따라가기때문에 꾸준한 수정이 필요하다.

 

 

 

 

 

 

 

 

 

 

 

728x90