通过f11启用全屏后，通过javascript禁用全屏 [英] After enabling full screen through f11 disable full screen through javascript

问题描述

通过按下面的按钮，我可以启用和禁用全屏模式，但是在按f12键后，我不能禁用全屏模式。我参考了其他答案，他们只提供了一种检测窗口是否处于全屏模式的方法。我无法获得用于从全屏禁用全屏模式的代码（通过f11键制成）。我尝试通过代码触发f11，但没有成功。在所有浏览器中是否有解决方案？

  HTML代码：
< button id = fullbutton width = 60px height = 60px alt = logo onclick = toggleFullScreen（this）>打开< / button> 
 
 JavaScript代码：
 
函数toggleFullScreen（element）{
 //第一部分
 
 if（（window.fullScreen）|| （window.outerWidth === screen.width&& window.outerHeight == screen.height））{
 
 console.log（已启用全屏）
 
 if（document.exitFullscreen）
 document.exitFullscreen（）; 
 else if（document.msExitFullscreen）
 document.msExitFullscreen（）; 
 else if（document.mozCancelFullScreen）
 document.mozCancelFullScreen（）; 
 else if（document.webkitExitFullscreen）
 document.webkitExitFullscreen（）; 
 
 
}否则{
 
 //第二部分
 
 
 if（！document.fullscreenElement& ;! document.mozFullScreenElement&！文档.webkitFullscreenElement&！文档.msFullscreenElement）{
 
 
 if（document.documentElement.requestFullScreen）{
 document.documentElement。 requestFullScreen（）; 
}否则，如果（document.documentElement.mozRequestFullScreen）{
 document.documentElement.mozRequestFullScreen（）; //对于mozilla 
}否则，如果（document.documentElement.webkitRequestFullScreen）{
 
 document.documentElement.webkitRequestFullScreen 
（Element.ALLOW_KEYBOARD_INPUT）; // for chrome 
} else if（document.documentElement.msRequestFullscreen）{
 document.documentElement.msRequestFullscreen（）; 
} // for 
 
 // document.getElementById（‘fullbutton’）。innerText =‘Off’； 
 
}否则{
 
 // // document.getElementById（’fullbutton’）。innerText =‘On’; 
 if（document.msFullscreenElement）{
 document.msExitFullscreen（）; 
} //对于
 if（document.cancelFullScreen）{
 document.cancelFullScreen（）; 
} 
 else if（document.mozCancelFullScreen）{
 document.mozCancelFullScreen（）; //对于mozilla 
}否则，如果（document.webkitCancelFullScreen）{
 document.webkitCancelFullScreen（）; 
} //对于Chrome 
 
} 
 
 
 
 console.log（未启用全屏显示）
 
} 
 
} 
  

如果启用了f11，给出 document.webkitIsFullScreen 结果为false。我尝试先给出 document.documentElement.webkitRequestFullscreen（）然后 document.webkitCancelFullScreen（）也不起作用。

解决方案

F11 全屏模式是一种浏览器/操作系统功能，您无法通过javascript访问，就像您无法访问地址栏的显示方式一样。

您可以控制的是全屏API ，这就是 document.exitFullscreen 或 document.fullscreenElement 的基础。

但是此全屏API与 F11 一个。

---

Ps：实际上，有一个 显示模式 media-查询，这应该让我们知道。

但是，到目前为止，似乎只有FireFox实现了它。

  const query = matchMedia（ all and（display-mode：fullscreen ）; query.onchange = e => {console.log（query.matches？'entered'：'exited'，'全屏模式'）;};  

< pre class = snippet-code-html lang-html prettyprint-override> < p>在Firefox中，尝试进入或退出全屏模式< / p>

By pressing below button i am able to enable and disable fullscreenmode but after f12 is pressed i am not enable to disable fullscreen mode.I refered other answers they have gave only a ways to detect whether window is in full screen mode or not .I am not able to get code for disabling full screen mode from fullscreen(made through f11 key).I tried by triggering f11 through code but it didnt work.Is there any solution for it in all the browsers?

 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 ")

   }

   }

Also after enabling through f11 if i give document.webkitIsFullScreen result is giving false .I tried by giving document.documentElement.webkitRequestFullscreen() and then document.webkitCancelFullScreen() that too didnt work.

解决方案

F11 fullscreen mode is a browser/OS feature that you don't have access to from javascript, just like you don't have access to how the address bar is displayed.

What you can control is the Fullscreen API, and this is what the document.exitFullscreen, or document.fullscreenElement are based on.

But this fullscreen API is not the same as the F11 one.

---

Ps: actually, there is the display-mode media-query which should let us know about it.
But it seems that only FireFox did implement it as of now.

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>

这篇关于通过f11启用全屏后，通过javascript禁用全屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！