개발/코딩관련
크롬 전체화면
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