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