javascript - 按键时使用 Javascript 进入和退出浏览器全屏 View

Question

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

我的 HTML

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

我的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”时如何关闭全屏？我想我需要测试当前 View 是否全屏，并根据结果使按键事件表现不同。怎么样？

Answer 1

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

在 Chrome 中工作的 Fiddle:https://jsfiddle.net/weft_digital/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()
        }
    }
};