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”键时如何关闭全屏屏幕？我想我需要测试当前视图是否为全屏显示，并根据结果使按键事件的行为有所不同。怎么会

Answer 1

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

可在Chrome浏览器中使用的小提琴：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()
        }
    }
};

按下键即可使用Java进入和退出浏览器全屏视图

1 个答案: