Javascript Chrome、Firefox上的全屏模式问题
我正在为这个网站做全屏功能： 在浏览器的右下角，有一个全屏按钮。如果单击它，浏览器将进入全屏模式，然后再次单击它，浏览器将退出全屏模式 但在Chrome、Firefox上，有一个小问题我无法理解：如果单击F11（全屏模式的快捷方式），菜单屏幕按钮不起作用 我搜索了gooogle并尝试在javascript中使用许多技巧，但还是失败了。那真是一种痛苦 有人能帮我吗（Javascript Chrome、Firefox上的全屏模式问题,javascript,jquery,google-chrome,firefox,fullscreen,Javascript,Jquery,Google Chrome,Firefox,Fullscreen,我正在为这个网站做全屏功能： 在浏览器的右下角，有一个全屏按钮。如果单击它，浏览器将进入全屏模式，然后再次单击它，浏览器将退出全屏模式 但在Chrome、Firefox上，有一个小问题我无法理解：如果单击F11（全屏模式的快捷方式），菜单屏幕按钮不起作用 我搜索了gooogle并尝试在javascript中使用许多技巧，但还是失败了。那真是一种痛苦 有人能帮我吗（ 感谢您需要使用此功能： <!doctype html> <html lang="en"> <
感谢您需要使用此功能：
<!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>
文件
全屏
取消全屏
（功能（）{
var viewFullScreen=document.getElementById（“查看全屏”）；
如果（查看全屏）{
viewFullScreen.addEventListener（“单击”），函数（）{
var docElm=document.documentElement；
if（文档请求全屏）{
docElm.requestFullscreen（）；
}
else if（docElm.msRequestFullscreen）{
msRequestFullscreen（）；
}
else if（docElm.mozRequestFullScreen）{
docElm.mozRequestFullScreen（）；
}
else if（docElm.webkitRequestFullScreen）{
docElm.webkitRequestFullScreen（）；
}
}，假）；
}
var cancelFullScreen=document.getElementById（“取消全屏”）；
如果（全屏取消）{
cancelFullScreen.addEventListener（“单击”），函数（）{
if（document.exitFullscreen）{
document.exitFullscreen（）；
}
else if（document.msexit全屏）{
document.msExitFullscreen（）；
}
else if（document.mozCancelFullScreen）{
document.mozCancelFullScreen（）；
}
else if（document.webkitcancelfillscreen）{
document.webkitcancelfulscreen（）；
}
}，假）；
}
})();
$(document).keyup(function(e){
if(e.which==122){ // charCode 122 for F11 key
e.preventDefault();
('#fullscreenbuttonid').click();
return false;
}
});
希望它有帮助您应该在执行之前验证
功能全屏（divID）{
fnFullScreen（divID，！IsFullScreen（））；
}
函数为全屏（）{
返回（document.fullscreenElement&&document.fullscreenElement！==null）||
（document.webkitFullscreenElement&&document.webkitFullscreenElement！==null）||
（document.mozFullScreenElement&&document.mozFullScreenElement！==null）||
（document.msFullscreenElement&&document.msFullscreenElement！==null）；
}
全屏功能（divID，开启）{
如果（打开）{
var docElm=$（'#'+divID）.parent（）[0]；
if（文档请求全屏）{
docElm.requestFullscreen（）；
}else if（docElm.mozRequestFullScreen）{
docElm.mozRequestFullScreen（）；
}else if（docElm.webkitRequestFullScreen）{
docElm.webkitRequestFullScreen（）；
}else if（docElm.msRequestFullscreen）{
msRequestFullscreen（）；
}
$（'#'+divID）.css（“最小高度”，“100vh”）；
$（'.btnFullScreen'）.html（'退出全屏'）；
}否则{
if（document.exitFullscreen）{
document.exitFullscreen（）.catch（（）=>{}）；
}else if（document.webkitExitFullscreen）{
document.webkitExitFullscreen（）；
}else if（document.mozCancelFullScreen）{
document.mozCancelFullScreen（）；
}else if（document.msexit全屏）{
document.msExitFullscreen（）；
}
$（'#'+divID）.css（“最小高度，”）；
$（'.btnFullScreen'）.html（'全屏'）；
}
}
全屏单击可全屏显示