Обнаружение, если браузер находится в полноэкранном режиме - PullRequest
Новая
       85

Обнаружение, если браузер находится в полноэкранном режиме

41 голосов
/ 26 июня 2009

Есть ли способ надежно определить, работает ли браузер в полноэкранном режиме? Я почти уверен, что нет никакого API-интерфейса браузера, к которому я могу обратиться, но кто-нибудь разработал его, проверяя и сравнивая определенные измерения высоты / ширины, выставленные DOM? Даже если это работает только для определенных браузеров, мне интересно услышать об этом.

Ответы [ 15 ]

1 голос
/ 10 сентября 2016

Это решение, к которому я пришел ... Я написал его как модуль es6, но код должен быть довольно простым. 

/**
 * Created by sam on 9/9/16.
 */
import $ from "jquery"

function isFullScreenWebkit(){
    return $("*:-webkit-full-screen").length > 0;
}
function isFullScreenMozilla(){
    return $("*:-moz-full-screen").length > 0;
}
function isFullScreenMicrosoft(){
    return $("*:-ms-fullscreen").length > 0;
}

function isFullScreen(){
    // Fastist way
    var result =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement;

    if(result) return true;

    // A fallback
    try{
        return isFullScreenMicrosoft();
    }catch(ex){}
    try{
        return isFullScreenMozilla();
    }catch(ex){}
    try{
        return isFullScreenWebkit();
    }catch(ex){}

    console.log("This browser is not supported, sorry!");
    return false;
}

window.isFullScreen = isFullScreen;

export default isFullScreen;
1 голос
/ 24 июня 2015

Мое решение: 

var fullscreenCount = 0;
var changeHandler = function() {                                           

    fullscreenCount ++;

    if(fullscreenCount % 2 === 0)
    {
        console.log('fullscreen exit');
    }
    else
    {
        console.log('fullscreened');
    }

}                                                                         
document.addEventListener("fullscreenchange", changeHandler, false);      
document.addEventListener("webkitfullscreenchange", changeHandler, false);
document.addEventListener("mozfullscreenchange", changeHandler, false);
document.addEventListener("MSFullscreenChanges", changeHandler, false);
1 голос
/ 07 марта 2014

Есть мой НЕ кросс-браузерный вариант: 

<!DOCTYPE html>
<html>
<head>
  <title>Fullscreen</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
var fullscreen = $(window).height() + 1 >= screen.height;
$(window).on('resize', function() {
  if (!fullscreen) {
    setTimeout(function(heightStamp) {
      if (!fullscreen && $(window).height() === heightStamp && heightStamp + 1 >= screen.height) {
        fullscreen = true;
        $('body').prepend( "<div>" + $( window ).height() + " | " + screen.height + " | fullscreen ON</div>" );
      }
    }, 500, $(window).height());
  } else {
    setTimeout(function(heightStamp) {
      if (fullscreen && $(window).height() === heightStamp && heightStamp + 1 < screen.height) {
        fullscreen = false;
        $('body').prepend( "<div>" + $( window ).height() + " | " + screen.height + " | fullscreen OFF</div>" );
      }
    }, 500, $(window).height());
  }
});
</script>
</body>
</html>

Проверено на:
Kubuntu 13.10 :
Firefox 27 (требуется <!DOCTYPE html>, скрипт корректно работает с двумя мониторами), Chrome 33, Rekonq - pass

Победа 7 :
Firefox 27, Chrome 33, Opera 12, Opera 20, IE 10 - проход
IE <10 - ошибка </p>

0 голосов
/ 01 июля 2019

Свойство Document только для чтения возвращает элемент, который в данный момент представлен в полноэкранном режиме в этом документе, или ноль, если полноэкранный режим в данный момент не используется. 

if(document.fullscreenElement){
  console.log("Fullscreen");
}else{
  console.log("Not Fullscreen");
};

Поддерживается во всех основных браузерах.

0 голосов
/ 03 декабря 2015

Пользователь window.innerHeight и screen.availHeight. Также ширина. 

window.onresize = function(event) {
    if (window.outerWidth === screen.availWidth && window.outerHeight === screen.availHeight) {
        console.log("This is your MOMENT of fullscreen: " + Date());    
}
Страница:
...