按下escape退出全屏时发生了什么?我如何用按钮复制它

What is happening when you press escape to exit fullscreen? How can I replicate it with a button?

本文关键字：何用 按钮 复制 什么 退出 escape 发生了 按下      更新时间：2023-09-26

我正试图为我的JavaScript画布游戏添加一个全屏选项，它在一些浏览器中都是可用的，但Firefox的问题让我意识到我的逻辑非常糟糕，幸运的是它适用于任何浏览器。

我想在画布上有一个按钮，让你切换全屏，但我遇到了一些问题。我发现的第一个问题是，如果我在调整大小时canvas.getBoundingClientRect()（当我退出/进入全屏时），那么在某些浏览器咳嗽Firefox中，该函数运行得太早，并且在更改之前得到了的边界，所以游戏仍然认为它应该是巨大的。

你可以在这里查看代码和程序。如果我什么都不太清楚，请告诉我，这个很难解释。

欢迎来到API全屏噩梦

这个API仍在开发中，自从它首次在网上发布以来，规格已经发生了很大的变化
不幸的是，到目前为止，没有一个主要的浏览器真正支持它（例如，实际的规范建议使用promise），更糟糕的是，这些浏览器都没有为这个API使用相同的关键字。

因此，让他们都满意可能有点苛刻。

但首先，您不应该收听resize事件，因为它可能在全屏模式的激活/取消激活期间发生多次。

您需要的是fullscreenchange事件
幸运的是，每个UA都编写了整个事件名称，其中没有任何camelBase，但使用了供应商前缀。（由于某些原因，IE不支持用addEventListener方法附加它…）

一旦您收到事件，为了知道我们是否真的进入或退出了全屏模式，您必须检查document.[vendor-prefix]full(s||S)creenElement（如果有），然后我们进入了模式；否则我们就退出了。

现在，要退出全屏模式，您必须调用
CCD_ 6方法。

因此，这里有一个dirty辅助函数：

// if fullscreen API is supported it will return an array containing
// [vendor-prefix, 'full(s||S)creen', 'Exit||Cancel'];
var fs = function(){
    // if it is natively supported without vendor prefix (may it happen some day...)
    if('onfullscreenchange' in document){
        return ['', 'Fullscreen', 'exit'];
    }
    if('onmozfullscreenchange' in document){
        return ['moz','FullScreen', 'Cancel'];
    }
    if('onwebkitfullscreenchange' in document){
        return ['webkit', 'Fullscreen', 'Exit'];
    }
    if('onmsfullscreenchange' in document){
        return ['ms', 'Fullscreen', 'Exit'];
    }
}();

if(fs){
    // for some reason, IE doesn't support the addEventListener method...
    document['on'+fs[0]+'fullscreenchange'] = function(){
        ctx.clearRect(0, 0, c.width, c.height);
        // check for 'fullscreenElement' to know weither we entered or exited the fullscreen mode
        var status = document[fs[0]+fs[1]+'Element'];
        var statusString =  status ? 'entered':'exited';
        ctx.fillText(statusString+' fullscreen', 250, 50);
        // increment our fullscreen change counter
        fs_count++;
        if(status){
            ctx.fillText('click the canvas to exit fullscreen mode', 150 , 100);
            // attach the exit/cancel fullscreen call
            c.onclick = function(){document[fs[0]+fs[2]+fs[1]]();};
            }
        // log the counters
        ctx.fillText('fullscreen calls : '+fs_count, 0, 140);
        ctx.fillText('resize calls : '+resize_count, 0, 150);
        };
    btn.onclick = function(){
        //this one implies a new camelCase if a vendor prefix is needed...
        var camel = fs[0] ? 'R':'r';
        c[fs[0]+camel+'equest'+fs[1]]();
    };
}
var ctx = c.getContext('2d');
ctx.fillStyle = "red";
var resize_count = 0;
var fs_count = 0;
// increment our resize counter
window.onresize= function(){resize_count++};

<canvas id="c" width="500"></canvas>
<button id="btn">enter fullscreen</button>

由于全屏请求在iframe中被阻止，您可以在此处中看到它的作用，并在此处使用代码

此外，您会注意到，每个浏览器都会对该请求采取不同的操作：webkit浏览器会使页面全屏，但保持元素的相同比例，而FF和IE会缩放元素以适应新的页面实施方式
这意味着您不应该查看getBoundingClientRect()矩形，而应该根据window.innerWidth和window.innerHeight属性计算新的大小。

这是我不久前创建的一个片段，它添加了esc键函数以退出全屏。我希望它也适用于你。

$('#view-fullscreen').click(function(){
    $('#container').css({'background': '#000000'}).fullScreen({
        'callback'      : function(fullScreen){
            if ( !fullScreen ) {

                $('#container').css({'background': '#ffffff'});
            }
        }
    });
    $(this).hide();
    return false;

});
相关文章：