如何检测全屏事件的发生，在按下F11键时

Question

如何检测全屏事件是否发生，在按下F11键时。如果发生了，那么屏幕就处于全屏模式，然后显示一个警告。不使用按键代码进行比较。请给我一种不同的方法来实现这个功能。

// mozilla proposal
element.requestFullScreen();
document.cancelFullScreen(); 

// Webkit (works in Safari and Chrome Canary)
element.webkitRequestFullScreen(); 
document.webkitCancelFullScreen(); 

// Firefox (works in nightly)
element.mozRequestFullScreen();
document.mozCancelFullScreen(); 

// W3C Proposal
element.requestFullscreen();
document.exitFullscreen();

或者

element.addEventListener('fullscreeneventchange', function(e) {
    if (document.fullScreen) {
       /* make it look good for fullscreen */
    } else {
       /* return to the normal state in page */
    }
}, true);

- Monica

Answer 1

window.onresize = function (event) {
    var maxHeight = window.screen.height,
        maxWidth = window.screen.width,
        curHeight = window.innerHeight,
        curWidth = window.innerWidth;

    if (maxWidth == curWidth && maxHeight == curHeight) {
        // do something
    }
}

另外，您还可以尝试使用window.screen.availWidth和window.screen.availHeight（请注意，这两者可能实际上不是屏幕分辨率，而是对菜单栏/浏览器窗口尺寸等宽度的容忍度）。

- Ashesh

---

谢谢，伙计，实际上，我需要这个用于VueJs。 - kusama

当我打开底部的开发者工具栏时，window.innerHeight减少了。 :( - sarkiroka

顺便说一句，如果开启了开发者工具，这个方法就不起作用了。 - undefined

Answer 2

如果您想在按下F11键时检查全屏状态，请尝试以下示例：

演示示例 / 全屏

function checkWH(){
    if((window.outerWidth-screen.width) ==0 && (window.outerHeight-screen.height) ==0 )
    {
        alert('fullscreen');
    }
}

$(window).keypress(function(event){
    var code = event.keyCode || event.which;
    if(code == 122){
        setTimeout(function(){checkWH();},1000);
    }
});

- Zword

---

keypress在Chrome中无法捕获F11键发送的事件，但keydown或keyup可以。 - Louis Ameline

整个全屏模式的东西太荒谬了。我无法相信为了这么简单的事情我需要做多少次黑客攻击。严肃点，Chrome，请把你的事情处理好。"因为安全"不是万能的借口。开发者应该能够一致地知道用户是通过F11还是API进入全屏模式。这种事情真的很令人沮丧。 - Chris Scott

如果我不在F11全屏模式下，但条件仍然为真，只是因为浏览器填满了整个屏幕。 - sarkiroka