Question

我使用javascript（例如，requestFullscreen）和css（:-webkit-full-screen）API来全屏检测浏览器的状态。我没有这些API的问题，因为它们成功运作。

我遇到的问题是，如果用户点击 F11 ，它不会在浏览器的环境中注册，并且用于全屏检测的javascript api和CSS api不会检测全屏。有什么方法可以解决这个问题吗？我有一些动画取决于屏幕的大小（关于全屏）我已经走到了死胡同。

Answer 1

值得一看

(function() {  

    var checktimer;

    function isFullScreen() {
        return (window.fullScreen) || (window.innerWidth == screen.width && window.innerHeight == screen.height);
    }

    $(window).on('resize', function() { 
        if(typeof checktimer!="undefined") { clearTimeout(checktimer); }
        checktimer = setTimeout(function() { alert(isFullScreen()); },2000); 
    });

})();

请注意，对isFullScreen（）函数的调用是定时的，这是因为某些浏览器会为全屏动作设置动画，导致调整大小事件直到动画停止为止。

尝试使用Firefox和Chrome - ff在这里使用window.fullScreen，我没有看过其他的，但很容易在返回检查中添加这些。

Answer 2

您可以使用事件监听器 fullscreenchange ：

var isFullscreen = false;
document.addEventListener('fullscreenchange', function () {
    isFullscreen = !!document.fullscreen;
    yourFunction();
}, false);

document.addEventListener('mozfullscreenchange', function () {
    isFullscreen = !!document.mozFullScreen;
    yourFunction();
}, false);

document.addEventListener('webkitfullscreenchange', function () {
    isFullscreen = !!document.webkitIsFullScreen;
    yourFunction();
}, false);

function yourFunction() {
    if(isFullscreen) {
        $('.your-element').addClass('fullscreen');
        // ...
    } else {
        $('.your-element').removeClass('fullscreen');
        // ...
    }
}

文档：

Answer 3

正如@bigBen在上面的评论中所建议的那样，$(window).on('resize', function() { });确实为我检测了 F11 （Chrome版本33.0.1750.154 m）。

但是，由于on('keydown'/'keyup')，我使用它的方式有多次调用，所以只要您在之后使用off('keydown'/'keyup')，它就会运行一次。* <登记/> * 更正多次通话是由于window.onresize，而不是keydown。

这是一个控制台屏幕截图，我通过 F11 使用＆＃39; resize＆＃39;登录进入和退出 http://i.stack.imgur.com/4ojr1.png

旧代码：

$(document).on('keydown', function(event) {
    $(document).off('keydown');
    $(window).on('resize', function() {
        if ($('body').hasClass('fullscreenOn')) {
            $('body').removeClass('fullscreenOn');
            // Do functions when exiting fullscreen
            $(document).on('keydown'); // Turn keydown back on after functions
            console.log("Exit F11");
        } else {
            $('body').addClass('fullscreenOn');
            // Do functions when entering fullscreen
            $(document).on('keydown'); // Turn keydown back on after functions
            console.log("Enter F11");
        }
    });
});

Jsfiddle（旧）：http://jsfiddle.net/4b8VL/（警告 - 需要在第一个 F11 按键之前点击结果区域内）

使用＆＃39;调整大小＆＃39;还具有通过JS API进入全屏时检测的额外好处。请注意，如果您也通过JS API使用全屏，则应在全屏激活时隐藏按钮以全屏（通过JS API）。因此，当通过JS API输入全屏时，用户只能使用浏览器提供的退出方法 - Esc ，或者当通过 F11 输入全屏时， F11

*更新* 以下代码是跨浏览器友好的。而不是检测window.onresize并将其作为切换全屏的基础，最好只重定向 F11 键以使用全屏API。

// fullscreen API goes here - **MDN - Using fullscreen mode -** https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

$(document).on('fullscreenchange', function(event) { // 'fullscreenchange' eventlistener from fullscreen API
    event.preventDefault();
    if ($('body').hasClass('fullscreen')) {
        $('body').removeClass('fullscreen');
        // Do functions when exiting fullscreen
        console.log("Exit Fullscreen");
    } else {
        $('body').addClass('fullscreen');
        // Do functions when entering fullscreen
        console.log("Enter Fullscreen");
    }
});

$(document).on('keydown', function(event) {
    if (event.which == 122) {
        event.preventDefault();
        toggleFullScreen(); // From fullscreen API
    }
});

注意：由于jsfiddle的设置方式，我认为这似乎不适用于jsfiddle。但是，它适用于实时网站;在http://aaronkhare.com/playground/circa查看我的旁边项目（关闭/关闭音量），查看新代码的实时工作示例。

Answer 4

查看此HTML5进入全屏垫片：

垫片就像一个迷你黑客，可以让动作跨浏览器兼容（真的是一个楔子或门槛），直到浏览器弄明白

// detecting if browser supports fullscreen
return document.body.mozRequestFullScreen 
    || document.body.webkitRequestFullScreen 
    || document.body.requestFullScreen;

// requesting full screen on an elm
( elm.mozRequestFullScreen && elm.mozRequestFullScreen() ) 
    || ( elm.webkitRequestFullScreen && elm.webkitRequestFullScreen() ) 
    || ( elm.requestFullScreen && elm.requestFullScreen() );

    //binding to full screen event
    ( document.body.requestFullScreen && 
        window.addEventListener('fullscreenchange',fullScreenEvent) ) || ( document.body.webkitRequestFullScreen && 
        window.addEventListener('webkitfullscreenchange',fullScreenEvent ) ) || ( document.body.mozRequestFullScreen && 
        window.addEventListener('mozfullscreenchange',fullScreenEvent) );

来源：https://gist.github.com/samccone/1653975/raw/0c5597e6bc8e312d0674ff25a67d3271916a957f/gistfile1.js

Answer 5

我的解决方案是监听F11键，手动触发全屏API requestFullscreen方法，然后返回false：

// listen for fullscreenchange and keydown events
$(document).on({
    'fullscreenchange': fullscreenToggled,
    'keydown': documentKeydown
});

// if F11 has been pressed, call the fullscreen api requestFullscreen method
// and return false, disabling the default browser functionality
function documentKeydown(e) {
    if ( e.originalEvent.code == 'F11' ) {
        $('body')[0].requestFullscreen();
        return false;
    }
}

// check to see if body has the :fullscreen pseudo-class
// (which only gets detected when fullscreen is launched via the api)
function fullscreenToggled() {
    if ( $('body').is(':fullscreen') ) {
        // we are in fullscreen mode
    } else {
        // not in fullscreen mode
    }
}

诚然，如果用户从浏览器菜单启动全屏模式，并且目前未在Chrome（v84.0.4147.125）以外的任何其他软件上进行过测试，则此方法将行不通，但对我而言确实有用。

浏览器F11全屏不会注册-webkit-full-screen或Javascript API

5 个答案: