Перехватить выход из полноэкранного режима
 

Подскажите пожалуйста как перехватить выход из полноэкранного режима ?

Я хотел бы вывести console.log на это событие.

Нашёл на форуме статью где 6 лет назад ТС задавался подобным вопросом, но в этой ветке нет работающего кода.

https://javascript.ru/forum/misc/475...atiya-esc.html

https://www.w3schools.com/jsref/tryi...llscreenchange
https://stackoverflow.com/questions/...ullscreen-mode

Почему-то у меня не совсем получается поймать выход из полноэкранного режима.

Написал следующий код, но он работает только в Firefox, в Chrome не работает.

Подскажите пожалуйста как мне поймать выход.

function isFullScreen(){
    return window.screenTop == 0 ? true : false;
}

document.addEventListener("fullscreenchange", function() {

    if(! isFullScreen()) {
        alert ("Exit 1");
    }
});

document.addEventListener("mozfullscreenchange", function() {

    if(! isFullScreen()) {
        alert ("Exit 2");
    }
});

document.addEventListener("webkitfullscreenchange", function() {
    if(! isFullScreen()) {
        alert ("Exit 3");
    }
});

document.addEventListener("msfullscreenchange", function() {
    if(! isFullScreen()) {
        alert ("Exit 4");
    }

});

Разбрался, спасибо за ссылки.

Всё же не разобрался.

Почему-то не получается перехватить выход из полноэкранного режима во всех браузерах корректно.

Подскажите пожалуйста как распознать что именно после нажатия ESC пользователь выходит из полноэкранного режима ?

document.addEventListener("fullscreenchange", function() {

        if( (screen.availHeight || screen.height-30) >= window.innerHeight ) {

            alert("exit 1");
        }


    });

    document.addEventListener("mozfullscreenchange", function() {

        if( (screen.availHeight || screen.height-30) >= window.innerHeight ) {

            alert("exit 2");
        }

    });

    document.addEventListener("webkitfullscreenchange", function() {

        if( (screen.availHeight || screen.height-30) >= window.innerHeight ) {

            alert("exit 3");
        }

    });

    document.addEventListener("msfullscreenchange", function() {

        if( (screen.availHeight || screen.height-30) >= window.innerHeight ) {

            alert("exit 4");
        }

    });

Никак, наверное. При выходе из fullscreen'а событие клавиатуры не передается документу.

Я себе такой стенд накидал:

Fullscreen mode: 
<button onclick="openFullscreen();">On</button>
<button onclick="closeFullscreen();">Off</button>
<div>
    <pre id="log" style="max-height: 300px"></pre>
</div>

<script>
    const elem = document.documentElement;

    /* Function to open fullscreen mode */
    function openFullscreen() {
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.mozRequestFullScreen) { /* Firefox */
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
        elem.webkitRequestFullscreen();
      } else if (elem.msRequestFullscreen) { /* IE/Edge */
        elem = window.top.document.body; //To break out of frame in IE
        elem.msRequestFullscreen();
      }
    }

    /* Function to close fullscreen mode */
    function closeFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        window.top.document.msExitFullscreen();
      }
    }
    
    const isFullscreenMode = () => Math.abs(window.innerHeight - screen.height) < 10;

    const devtoolsIsOpen = (() => {
        const devtools = function () { this.opened = false; };
        devtools.toString = function () { this.opened = true; };

        return () => {
            console.log('%c', devtools);
            
            return devtools.opened;
        };
    })();
    
    const log = (() => {
        const log = document.querySelector('#log');
        
        return message => {
            let lines = log.textContent.split('\n');
            lines = lines.slice(Math.max(0, lines.length - 5));
            
            lines.push(message);
            
            log.textContent = lines.join('\n');
        }
    })();
</script>

<script>
let lastEscapeKeydownTime = 0;
const ESC_KEYCODE = 27

const events = [
    'fullscreenchange',
    'mozfullscreenchange',
    'webkitfullscreenchange',
    'msfullscreenchange',
];

events.forEach(function (eventName) {
    document.addEventListener(eventName, function () {
        const isFSMode = isFullscreenMode();
        log('FSMode: ' + (isFullscreenMode() ? 'on' : 'off'));
        
        if (!isFSMode && (new Date() - lastEscapeKeydownTime) / 1000 < 50) {
            log('This is a reaction to the click of a Escape button.');
        }
    });
});

['keydown', 'keypress', 'keyup'].forEach(eventName => {
    document.addEventListener(eventName, function (e) {
        if (e.code !== 'Escape' && e.keyCode !== ESC_KEYCODE) {
            return;
        }
        
        lastEscapeKeydownTime = +new Date();
        log('escape');
    });
});

</script>

Извиняюсь за столь позднюю реакцию на ваше сообщение. Сейчас вернулся к этому вопросу, и похоже что скрипт не работает, если например у пользователя открыт инспектор или консоль (Firefox).

В этом случае статус всегда FSMode: off, что при открытии полноэкранного режима, что при закрытии.