如何走出按下F11激活的全屏
如何走出按下F11激活的全屏
提问于 2022-01-12 09:07:05
我需要激活全屏和禁用全屏幕的功能，每件事都很好，当我使用document.requestFullScreen和document.cancelFullScreen API。但是当用户使用F11激活全屏时，document.cancelFullScreen API就不能像我所希望的那样工作了。
我试着寻找和测试许多堆叠溢出的答案，但这些都帮不了我。我想要反向/取消用户按下F11键的全屏效果。
这里是我创建的演示程序，您可以在其中看到这个问题码砂箱，在这个沙箱中，只需在新的单独窗口/选项卡中打开输出，然后按下将激活全屏的F11，现在尝试按下我提供的无法退出全屏效果的“Go全屏”。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-02-02 10:37:26
我已经尝试过这个方法希望这能解决你的麻烦。
<!DOCTYPE html>
<html>
<head>
<style>
.full-container {
background-color: yellow;
}
</style>
</head>
<body>
<div id="full-container" class="full-container">
Open this page in New Window to see effect of button
<button onclick="goFullscreen()">go FullScreen</button>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var fullScreenMod = false;
$(document).on("keydown", function (ev) {
if (ev.keyCode === 27 || ev.keyCode === 122) {
goFullscreen();
return false;
}
});
/* Standard syntax */
document.addEventListener("fullscreenchange", function () {
fullScreenMod = !fullScreenMod;
});
/* Firefox */
document.addEventListener("mozfullscreenchange", function () {
fullScreenMod = !fullScreenMod;
});
/* Chrome, Safari and Opera */
document.addEventListener("webkitfullscreenchange", function () {
fullScreenMod = !fullScreenMod;
});
/* IE / Edge */
document.addEventListener("msfullscreenchange", function () {
fullScreenMod = !fullScreenMod;
});
function goFullscreen() {
console.log("fullscreen called");
let topContainer = document.getElementById("full-container");
let isWholeFullScreen = fullScreenMod;
if (isWholeFullScreen == false) {
isWholeFullScreen = !isWholeFullScreen;
if (topContainer.requestFullScreen) {
topContainer.requestFullScreen();
} else if (topContainer.mozRequestFullScreen) {
topContainer.mozRequestFullScreen();
} else if (topContainer.webkitRequestFullScreen) {
topContainer.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (topContainer.msRequestFullscreen) {
topContainer.msRequestFullscreen();
}
} else {
isWholeFullScreen = !isWholeFullScreen;
if (document.exitFullScreen) {
document.exitFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
</script>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70678840
复制相关文章
相似问题
腾讯云开发者
