페이지가 전체 화면을 종료 할 때 감지하는 방법은 무엇입니까?

페이지가 전체 화면을 종료 할 때 감지하는 방법은 무엇입니까?

---

저는 Three.js로 3D 멀티 플레이어 게임을 만들고 있습니다. 여기에서 플레이어는 다양한 기존 게임에 참여할 수 있습니다. "재생"을 클릭하면 렌더러가 페이지 및 전체 화면에 추가됩니다. 이것은 훌륭하게 작동하지만 문제는 전체 화면을 종료해도 여전히 추가되어 있다는 것입니다. 제거하고 싶지만 언제인지 모르겠습니다!

그래서 기본적으로 "이 요소가 전체 화면을 종료했습니다"라는 이벤트를 찾고 있습니다.

다음은 페이지에 렌더러를 추가하는 방법입니다.

container = document.getElementById('container');
document.body.appendChild(container);

var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( WIDTH, HEIGHT);
container.appendChild( renderer.domElement );

전체 화면으로 표시하는 경우 :

THREEx.FullScreen.request(container); 
renderer.setSize(screen.width, screen.height);

또한 누군가가 마우스를 페이지 상단으로 가리킬 때마다 성가신 헤더가 나타나지 않도록하는 방법이 있습니까? 그리고 나는 Firefox와 Chrome에서 무엇을 (전체 화면으로 나가는) 일을하는 것을 막을 수 있다고 생각합니다. preventDefault?

편집하다:

"fullscreenchange"이벤트는 실제로 발생하지만 브라우저마다 이름이 다릅니다. 예를 들어 Chrome에서는 "webkitfullscreenchange"라고하고 Firefox에서는 "mozfullscreenchange"라고합니다.

---

전체 화면 사양 "fullscreenchange"은 페이지의 전체 화면 상태가 변경 될 때마다 문서 에서 (적절한 접두사 사용) 이벤트가 발생하도록 지정합니다. 해당 이벤트 내 document.fullScreenElement에서 페이지가 전체 화면인지 여부 를 확인할 수 있습니다 . 전체 화면 인 경우 속성은 null이 아닙니다.

자세한 내용은 MDN 을 확인 하세요.

다른 질문 : 아니요, Esc전체 화면 종료 를 방지 할 수있는 방법은 없습니다 . 이것이 사용자가 브라우저가 수행하는 작업을 항상 제어 할 수 있도록하기 위해 만들어진 타협입니다. 브라우저는 사용자가 전체 화면을 종료하는 것을 방지하는 방법을 제공 하지 않습니다 . 기간.

Firefox는 Chrome보다 렌더링 속도가 느리기 때문에 대부분의 실제적인 목적으로는 그렇지 않습니다. 두 브라우저 간의 성능 차이가 크다면 자바 스크립트 코드가 GPU가 아니라 병목 현상임을 의미 할 수 있습니다.

---

내가 한 방법은 다음과 같습니다.

if (document.addEventListener)
{
 document.addEventListener('fullscreenchange', exitHandler, false);
 document.addEventListener('mozfullscreenchange', exitHandler, false);
 document.addEventListener('MSFullscreenChange', exitHandler, false);
 document.addEventListener('webkitfullscreenchange', exitHandler, false);
}

function exitHandler()
{
 if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null)
 {
  // Run code on exit
 }
}

Opera, Safari, Chrome with webkit, Firefox / Gecko with moz, IE 11 with MSFullScreenChange를 지원하고 fullscreenchange모든 브라우저에서 성공적으로 구현되면 실제 사양을 지원 합니다. 분명히 Fullscreen API는 최신 브라우저에서만 지원되므로 attachEvent이전 버전의 IE에 대한 대체 기능을 제공하지 않았습니다 .

---

내가 사용하고 존 다이어의 코드 중앙 처리기를 만들 토니와 통합, 그리고 Yannbane의 발언을하고 전화를 여러 청취자를 추가 :

   var changeHandler = function(){                                           
      //NB the following line requrires the libary from John Dyer                         
      var fs = window.fullScreenApi.isFullScreen();
      console.log("f" + (fs ? 'yes' : 'no' ));                               
      if (fs) {                                                              
        alert("In fullscreen, I should do something here");                  
      }                                                                      
      else {                                                                 
        alert("NOT In fullscreen, I should do something here");              
      }                                                                      
   }                                                                         
   document.addEventListener("fullscreenchange", changeHandler, false);      
   document.addEventListener("webkitfullscreenchange", changeHandler, false);
   document.addEventListener("mozfullscreenchange", changeHandler, false);

이것은 Moz 12에서만 테스트되었습니다.

자유롭게 확장하십시오

---

브라우저 용 API가 변경되었습니다. 예 : Chrome에는 document.webkitIsFullScreen이 없습니다. 이것은 나를 위해 일한 것입니다.

document.addEventListener("fullscreenchange", onFullScreenChange, false);
document.addEventListener("webkitfullscreenchange", onFullScreenChange, false);
document.addEventListener("mozfullscreenchange", onFullScreenChange, false);

onFullScreenChange() {
  var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;

  // if in fullscreen mode fullscreenElement won't be null
}

---

I slightly changed Alex W's code to make events fire on fullscreen exits only. Tested in Firefox 53.0, Chrome 48.0, and Chromium 53.0:

if (document.addEventListener)
{
 document.addEventListener('fullscreenchange', exitHandler, false);
 document.addEventListener('mozfullscreenchange', exitHandler, false);
 document.addEventListener('MSFullscreenChange', exitHandler, false);
 document.addEventListener('webkitfullscreenchange', exitHandler, false);
}

function exitHandler()
{
 if (document.webkitIsFullScreen === false)
 {
  ///fire your event
 }
 else if (document.mozFullScreen === false)
 {
  ///fire your event
 }
 else if (document.msFullscreenElement === false)
 {
  ///fire your event
 }
}  

---

Mozilla's MDN page hinted me about the usage of fscreen as a vendor-agnostic approach to the fullscreen APIs. Sadly, even at this very date (2018-02-06), these APIs are not fully standardized; Firefox does not have the unprefixed APIs enabled by default.

Anyway, here is the URL to fscreen: https://github.com/rafrex/fscreen (it's available as an npm package for use in Node.js-based build pipelines.)

For the moment, this seems like the superior approach to me until the unprefixed APIs have landed and are readily available in all major browsers.

---

All browsers worked for me except for safari

This is what I ended up using to fix the issue.

if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1)  { 

  document.addEventListener('webkitfullscreenchange', exitHandler);

  function exitHandler() {
    if (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
           /*CODE HERE*/      
        }
      }
    }  

Take a look at the code pen. I have to say a huge thank to Chris Ferdinandi for his post here

ReferenceURL : https://stackoverflow.com/questions/10706070/how-to-detect-when-a-page-exits-fullscreen