按一个键进入和退出带有Javascript的浏览器全屏视图

当用户按下f键时，我想全屏显示一个元素

我的HTML

<div id="test">
   hello
</div>

或者一个

---

打开元素全屏正在工作我的问题：当用户在打开全屏时按“f”时，如何关闭全屏？我想我需要测试当前视图是否为全屏，并根据结果使按键事件的行为有所不同。怎么办

您可以使用布尔值

document.fullscreen

检查文档是否处于全屏模式。要退出全屏，请使用

document.exitFullscreen（）

在铬合金中工作的小提琴：

---

用同样的方法尝试，但没有帮助。我的意思是，全屏工作，而不是退出屏幕与信适合似乎是工作，谢谢。我必须补充一点，使用

document.fullscreenElement

而不是

document.fullscreen

似乎更好，因为它已被弃用（请参阅）哦，捕捉得好！我更新了答案，并做了相应的修改

// go fullscreen when pressing 'f' (key 70)
document.onkeydown = function(e){
    e = e || window.event;
    var key = e.which || e.keyCode;
    if(key===70){
        requestFullScreen(
            document.getElementById("test")
        );
    }
};

function requestFullScreen(elt) {
    console.log("Requesting fullscreen for", elt);
    if (elt.requestFullscreen) {
        elt.requestFullscreen();
    } else if (elt.msRequestFullscreen) {
        elt.msRequestFullscreen();
    } else if (elt.mozRequestFullScreen) {
        elt.mozRequestFullScreen();
    } else if (elt.webkitRequestFullscreen) {
        elt.webkitRequestFullscreen();
    } else {
        console.error("Fullscreen not available");
    }
}

document.onkeydown = function(e){
  e = e || window.event;
  var key = e.which || e.keyCode;
  if(key===70){
       if(!document.fullscreenElement){
            requestFullScreen(document.getElementById("test"));
        }else{
            document.exitFullscreen()
        }
    }
};