logo标签列表

浏览器 F11 全屏模式无法注册到 -webkit-full-screen 或 Javascript API

javascriptcsshtml
13

我正在使用javascript（例如，requestFullscreen）和css（:-webkit-full-screen）API来检测浏览器是否处于全屏状态。这些API成功地工作，没有问题。

我的问题在于，如果用户按下F11，它不会在浏览器环境中注册，并且javascript API和CSS API无法检测到全屏状态。有没有什么解决方法？我的一些动画取决于屏幕大小（关于全屏），我已经陷入了死胡同。

1
我也遇到了类似的问题。我可以使用自定义 JavaScript 代码切换全屏，但一旦用户开始使用 F11 键+自定义 JavaScript 代码的组合，所有的东西都会变坏。 - Tim B James
2
从这个答案中（https://dev59.com/2nvaa4cB1Zd3GeqPGrf6#21342259），似乎这是一个无法解决的问题，但也许你可以捕获F11按键事件并执行必要的步骤？ - bishop
处理关键事件吗？因为如果您使用preventDefault / stopPropagation，这可能会说明问题。 - GameAlchemist
@bishop，这是一个不错的尝试。不幸的是，除非光标首先在视口内单击，否则F11将无法被捕获。 - dman
5个回答
3
值得一看
(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()函数的调用是有时间限制的。原因是某些浏览器将全屏操作进行动画处理，直到停止动画才会触发resize事件。

在Firefox和Chrome上尝试过 - ff在此处使用window.fullScreen。我没有查看其他浏览器，但很容易在返回值检查中添加它们。

我以前尝试过这个，但是当按下F11时，window.innerHeight和screen.width都不会改变（也没有被F11捕获的调整大小监听器）。 - dman
嗨Dman，Firefox可能不支持，这就是为什么包括检查window.fullscreen的原因。再试一次（我使用最新的Chrome和Firefox来运行此程序） - Rob Sedgwick
2
如@bigBen在他上面的评论中建议的那样，$(window).on('resize', function() { });也可以检测到我的（Chrome版本33.0.1750.154m）。
然而，由于on('keydown'/'keyup')的方式，我使用它时会有多个调用，所以只要你在之后使用off('keydown'/'keyup')，它就会运行你的函数一次。*
*更正 多次调用是因为window.onresize，而不是keydown。
这是一个控制台截图，我在其中记录了通过'resize'输入和退出F11 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之前需要在结果区域内单击）

使用“resize”还具有通过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（将音量调低/关闭），以获取新代码的实际工作示例。

是的，在视口中按F11时可以调整大小。但如果您单击视口外的浏览器工具栏并按F11，则不会注册大小调整。 - dman
当我点击浏览器工具栏，或者在另一个标签页中按下F11并切换回我的带有此代码的网页时，它仍然可以正常工作。请查看添加的jsfiddle-请注意，由于fiddle需要您首先单击结果区域，因此它不是最好的示例。如果您查看我的其中一个副项目http://aaronkhare.com/playground/circa/（视频会自动播放，请关闭/降低音量），您将看到它甚至可以在您提到的情况下正常工作。 - Wraithers
我添加了另一种方法，这种方法更好，因为它使F11与JS API联系起来。此外，请查看我上面链接的我的副业项目以获取实时示例。 - Wraithers
1
您可以使用事件监听器 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');
        // ...
    }
}

文档：

10
这是一个好主意，不幸的是，如果使用F11进行屏幕更改，事件监听器将无法检测到。 - dman
我猜 $(window).on('resize', function() { }); 不够用？ - B.Asselin
1
不行，因为F11全屏也不会触发调整大小的事件监听器。 - dman
不是吗？我已经尝试过了，它在我的最新版Firefox、Chrome和MsIE上都可以运行。 - B.Asselin
我在Chromium中使用了一个事件监听器来进行调整大小，但是使用F11时该事件并没有被触发。 - dman
0

看看这个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

1
那样做是可行的，但问题在于'addEventListener('fullscreenchange',...)无法捕获由F11触发的事件。我需要知道全屏状态，如果用户按下F11，则会错误地报告。 - dman
0
我的解决方案是监听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）中进行了测试，但对我来说起作用。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接