如何檢測頁面何時退出全屏？

Question

我正在用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？

而且，還有誰知道爲什麼Firefox在3D渲染中比Chrome慢得多？我的意思是，我使用WebGL，這意味着GPU正在使用！

編輯：

的「fullscreenchange」事件確實被觸發，但它在不同的瀏覽器不同的名字。例如，在Chrome上稱爲「webkitfullscreenchange」，在Firefox上則爲「mozfullscreenchange」。

Answer 1

Fullscreen規範指定在頁面的全屏狀態發生更改時（包括進入和退出全屏），在文檔上觸發"fullscreenchange"（具有適當的前綴）事件。在該事件中，您可以檢查document.fullScreenElement以查看頁面是否全屏顯示。如果它是全屏，則該屬性將是非空的。

Check out MDN瞭解更多詳情。

至於其他問題：不，沒有辦法阻止Esc退出全屏。這是爲了確保用戶始終能夠控制他們的瀏覽器正在做什麼而作出的妥協。瀏覽器將從不給你一種方法來防止用戶退出全屏。期。

至於Firefox比Chrome渲染速度慢，我可以向你保證，對於大多數實際目的而言，事實並非如此。如果您看到兩個瀏覽器之間的性能差異很大，這可能意味着您的JavaScript代碼是瓶頸，而不是GPU。

Answer 2

我使用John Dyer's code，與託尼集成，並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); 

這在莫茲12只測試。

請隨意擴大

Answer 3

我是這樣做的：

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

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

支持Opera，Safari瀏覽器，Chrome會webkit，火狐/壁虎與moz，IE 11 MSFullScreenChange，並將支持一旦它在所有瀏覽器中成功實現後，將使用fullscreenchange實際規格。顯然，全屏API僅支持在現代的瀏覽器，所以我沒有對舊版本的IE提供attachEvent回退。

的瀏覽器

Answer 4

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 
} 

Answer 5

我稍微改變亞歷克斯·W公司的代碼，以使在全屏退出只有事件觸發。經測試，在火狐53.0，鉻48.0，和鉻53.0：

if (document.addEventListener) 
{ 
    document.addEventListener('webkitfullscreenchange', exitHandler, false); 
    document.addEventListener('mozfullscreenchange', exitHandler, false); 
    document.addEventListener('fullscreenchange', exitHandler, false); 
    document.addEventListener('MSFullscreenChange', 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 
    } 
} 

Answer 6

Mozilla的MDN page暗示我有關的fscreen使用的與廠商無關的方法來全屏的API。可悲的是，即使在這個日期（2018-02-06），這些API還沒有完全標準化; Firefox默認情況下沒有啓用前綴無效的API。

不管怎麼說，這是網址fscreen：https://github.com/rafrex/fscreen（它可作爲npm包基於Node.js的建造管道使用）

就目前而言，這似乎是直到上級的做法給我沒有前綴的API已經登陸並且可以在所有主流瀏覽器中使用。