После включения полного экрана через f11 отключите полный экран через javascript

Question

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

 Html code:
     <button id="fullbutton" width="60px" height="60px" alt="logo" onclick="toggleFullScreen(this)">On</button>

Javascript code :

function toggleFullScreen(element) {
//first part 

if((window.fullScreen) || (window.outerWidth === screen.width && window.outerHeight == screen.height)) {

console.log("full screen is enabled ")

if (document.exitFullscreen)
    document.exitFullscreen();
else if (document.msExitFullscreen)
    document.msExitFullscreen();
else if (document.mozCancelFullScreen)
    document.mozCancelFullScreen();
else if (document.webkitExitFullscreen)
    document.webkitExitFullscreen();


}else {

//second part


if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {


if (document.documentElement.requestFullScreen) {  
  document.documentElement.requestFullScreen();  
} else if (document.documentElement.mozRequestFullScreen) {  
  document.documentElement.mozRequestFullScreen();  //for mozilla
} else if (document.documentElement.webkitRequestFullScreen) {      

 document.documentElement.webkitRequestFullScreen
      (Element.ALLOW_KEYBOARD_INPUT);   //for chrome
     }  else if (document.documentElement.msRequestFullscreen) {
    document.documentElement.msRequestFullscreen();
}//for ie

        //   document.getElementById('fullbutton').innerText = 'Off';

   } else {  

    // document.getElementById('fullbutton').innerText = 'On';
    if (document.msFullscreenElement) {
    document.msExitFullscreen();
    } //for ie
   if (document.cancelFullScreen) {  
     document.cancelFullScreen();  
    }   
  else if (document.mozCancelFullScreen) {  
      document.mozCancelFullScreen();   //for mozilla
   } else if (document.webkitCancelFullScreen) {  
      document.webkitCancelFullScreen();  
   }//for chrome

    }



  console.log("full screen is not enabled ")

   }

   }

Также после включения через f11, если я даю document.webkitIsFullScreen, результат дает ложь. Я пытался, дав document.documentElement.webkitRequestFullscreen(), а затем document.webkitCancelFullScreen(), что тоже не сработало.

Answer 1

F11 полноэкранный режим - это функция браузера / ОС, к которой у вас нет доступа из javascript, точно так же, как у вас нет доступа к отображению адресной строки.

То, что вы можете контролировать, это Полноэкранный API , и это то, на чем основаны document.exitFullscreen или document.fullscreenElement.

Но этот полноэкранный API отличается от F11 one.

---

Ps: на самом деле есть медиа-запрос display-mode , который должен сообщить нам об этом.
Но похоже, что только FireFox реализовал это на данный момент.

const query = matchMedia("all and (display-mode: fullscreen");
query.onchange = e => {
  console.log(query.matches ? 'entered' : 'exited', 'fullscreen mode');
};

<p>From Firefox, try to enter or exit FullScreen mode</p>