Как обнаружить браузер ушел в полный экран

Question

TLDR;

Я могу определить, прошел ли браузер в полноэкранном режиме через полноэкранный API, но я не могу обнаружить, что браузер перешел в полноэкранный режим через f11 или в меню браузера (в частности, хром).

Оригинал:

В настоящее время я использую screenfull, чтобы перейти на полный экран и обнаружить, что браузер в полноэкранном режиме. Проблема в том, что я не хочу отображать кнопку переключения полного экрана, когда браузер перешел на полный экран через функцию браузера (то есть f11 или полный экран через меню браузера). Это связано с тем, что API-интерфейс полного экрана javascript, похоже, не может обнаружить, что вы находитесь в полноэкранном режиме или выходите из полноэкранного режима, когда вы прошли через функцию браузера. Я мог бы просто определить, был ли f11 поражен, но это не работает на Mac или когда полноэкранный режим был запущен через меню браузера.

Любые идеи о том, как определить, был ли запущен полный экран с помощью функции браузера? Я ориентируюсь только на webgl-совместимые браузеры, чтобы сократить количество ошибок.

Answer 1

Я не проверял это на надежность, но это мой прием.

//without jQuery 
window.addEventListener('resize', function(){ 
    if(screen.width === window.innerWidth){ 
    // this is full screen 
    } 
}); 


    //with jQuery 
$(document).ready(function() { 
    $(window).on('resize', function(){ 
    if(screen.width === window.innerWidth){ 
     // this is full screen 
    } 
    }); 
}); 

Это, кажется, работает при нажатии на кнопку F11 и другие методы, поэтому он должен поймать крайние случаи, что полный экран апи не делает. Хотя я не уверен, что сравнение screen.width vs. window.innerWidth - это надежный способ проверки на весь экран. Возможно, кто-то еще может добавить/критиковать это.

Answer 2

Используйте fullscreenchange события для обнаружения полноэкранного события изменения, или если вы не хотите обрабатывать префиксы, чем вы можете также слушать resize событие (событие Изменить размер окна, который также срабатывает, когда весь экран ввод или выхода) и затем проверьте, нет ли document.fullscreenElement, чтобы определить, включен ли полноэкранный режим. Вам необходимо будет префикс поставщика fullscreenElement соответственно. Я хотел бы использовать что-то вроде этого:

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || 
document.webkitFullscreenElement || document.msFullscreenElement; 

https://msdn.microsoft.com/en-us/library/dn312066(v=vs.85).aspx имеет хороший пример для этого, который я привожу ниже. Они использовали событие fullscreenChange, но вы можете слушать для "resize" события

document.addEventListener("fullscreenChange", function() { 
      if (fullscreenElement != null) { 
       console.info("Went full screen"); 
      } else { 
       console.info("Exited full screen");    
      } 
     });