我正在为此站点执行全屏功能：http://bbtfeme.wpengine.com/home
在浏览器的右下角，有一个全屏按钮。如果单击它，浏览器将进入全屏模式，然后再次单击它，浏览器将退出全屏模式。
但是在Chrome，Firefox上，有一个小问题，我无法理解：如果单击F11（全屏模式的快捷方式），“菜单屏幕”按钮不起作用。
我搜索了gooogle，并尝试使用javascript中的许多技巧，但仍然失败。这真的很痛苦。
有人可以帮助我吗？ :(
感谢
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<p>
<button id="view-fullscreen">Fullscreen</button>
<button id="cancel-fullscreen">Cancel fullscreen</button>
</p>
<script>
(function () {
var viewFullScreen = document.getElementById("view-fullscreen");
if (viewFullScreen) {
viewFullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
}
var cancelFullScreen = document.getElementById("cancel-fullscreen");
if (cancelFullScreen) {
cancelFullScreen.addEventListener("click", function () {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}, false);
}
})();
</script>
</body>
</html>
$(document).keyup(function(e){
if(e.which==122){ // charCode 122 for F11 key
e.preventDefault();
('#fullscreenbuttonid').click();
return false;
}
});
希望有帮助
function FullScreen(divID) {
fnFullScreen(divID, !IsFullScreen());
}
function IsFullScreen() {
return (document.fullscreenElement && document.fullscreenElement !== null) ||
(document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
(document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
(document.msFullscreenElement && document.msFullscreenElement !== null);
}
function fnFullScreen(divID, TurnOn) {
if (TurnOn) {
var docElm = $('#' + divID).parent()[0];
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
} else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
} else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
} else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
$('#' + divID).css("min-height", "100vh");
$('.btnFullScreen').html('Exit Full Screen');
} else {
if (document.exitFullscreen) {
document.exitFullscreen().catch(() => { });
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
$('#' + divID).css("min-height", "");
$('.btnFullScreen').html('Full Screen');
}
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="body">
<div id="div1"> <button class="btnFullScreen" onclick="FullScreen('div1')">Full Screen</button> click to full screen</div>
</div>