javascript - 恢复全屏 div 的大小

Question

我目前有一个按钮，然后在单击时触发浏览器进入全屏模式，然后它会生成一个 id 为 fScreen 的特定 div 得到 width:100% 并且高度:100%。

当我单击 Esc 和 F11 按钮时，浏览器恢复到正常大小，但 div fScreen 已经占据了整个空间.在我的例子中，fScreen 的原始大小是

width: 1100px;
height: 500px;

到目前为止，我所做的是使用 keydown 函数将 fScreen 的 css 恢复到原来的大小，这是我的代码，它不会将其恢复到正常大小.

function mkFull() //make fullscreen
{       
        //fScreen DIV
        var elem = document.getElementById("fScreen");

        if (elem.requestFullscreen) 
        {
          elem.requestFullscreen();
        } 
        else if (elem.msRequestFullscreen) 
        {
          elem.msRequestFullscreen();
        } 
        else if (elem.mozRequestFullScreen) 
        {
          elem.mozRequestFullScreen();
        } 
        else if (elem.webkitRequestFullscreen) 
        {
          elem.webkitRequestFullscreen();
        }

        $('#fScreen').css({'width' : '100%' , 'height' : '85%'});
        isfull = 1;

}

    $(document).keydown(function(e) //when pressed esc and f11 revert back to original size
    {
        if (e.keyCode == 122 || e.keyCode == 27) 
        {   
            if(isfull == 1)
            {
                $('#fScreen').css({'width' : '100px' , 'height' : '500px'});
                isfull = 0;
            }   
        } 
    });

知道我做错了什么吗？

Answer 1

您可以收听 fullscreenchange 事件:https://developer.mozilla.org/en-US/docs/Web/Events/fullscreenchange

在处理程序中，保持屏幕状态(isFull)

HTML

<button id="btn">Fullscreen</button>
<div id="fScreen">fscreen</div>

JS

    var elem = document.getElementById('fScreen');
    var isFull = false;

    function mkFull() {
        //fScreen DIV
        var elem = document.getElementById("fScreen");

        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
        } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
            elem.webkitRequestFullscreen();
        }
    }

    document.addEventListener('webkitfullscreenchange', function(e) {
        isFull = !isFull;

        if (isFull) {
            elem.style = 'width: 100%; height: 85%; background: green;';
        } else {
            elem.style = 'width: 100px; height: 500px; background: red;';
        }
    });

    document.getElementById('btn').addEventListener('click', mkFull);