javascript - 通过 f11 启用全屏后通过 javascript 禁用全屏

标签 javascript events cross-browser

通过按下下面的按钮,我可以启用和禁用全屏模式,但在按下 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 ")

   }

   }

如果我给 document.webkitIsFullScreen 启用 f11 后,结果是 false。我尝试给 document.documentElement.webkitRequestFullscreen() 然后 document .webkitCancelFullScreen() 也没有用。

最佳答案

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

你能控制的是Fullscreen API ,这就是 document.exitFullscreendocument.fullscreenElement 的基础。

但是这个全屏 API 与 F11 不同。


Ps: 实际上,有display-mode media-query这应该让我们知道。
但目前似乎只有 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>

关于javascript - 通过 f11 启用全屏后通过 javascript 禁用全屏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51128490/

相关文章:

javascript - onkeyup 或 onkeypress javascript 事件问题 - 密码状态更新

javascript - 选择功能上的 knockout 访问更改事件

javascript - 如何避免在 HTML5 Canvas 中对特定颜色着色

javascript 删除 "onclick"事件监听器

javascript - Sencha Extjs - 正确覆盖方法吗?

HTML 和 CSS 浏览器兼容性问题

css - 字体大小 :0px and letter-spacing:10px displays differently in different browsers

javascript - 从/r/listenToThis 解析歌曲标题以获取 IFTTT 小程序

java - 防止 Enter 事件冒泡到主窗口

javascript - 将插入符号值设置到某个位置后无法获取插入符号位置值