按键时使用Javascript输入和退出浏览器全屏视图

Question

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

我的HTML

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

My JS

// 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");
    }
}

或者是JSFiddle。

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

Answer 1

可以使用布尔值document.fullscreen检查文档是否处于全屏模式。要退出全屏，您可以使用document.exitFullscreen()。

在Chrome中工作的小提琴：数字/wrd4yo5s/1/

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()
        }
    }
};