screenfull.js全屏状态监听

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了screenfull.js全屏状态监听相关的知识,希望对你有一定的参考价值。

参考技术A screenfull.js监控全屏状态,但是试了一下,isFullscreen的状态在全屏之后是true,ESC退出全屏之后状态没有改变,于是上网搜了一下,大多是让window.onresize 监听全屏状态:

实际上screenfull有个onchange事件,在这里维护全屏状态就行了:

特此记录

元素全屏的设置与监听

作者网站:http://hawkzz.com

设置全屏和退出全屏

 //全屏设置
    $('#fullScreen').on('click', function () {
        fullScreen();
    });
 //退出全屏
    $('#exitFullScreen').on('click', function () {
        exitFullScreen();
    });
 //进入全屏
function fullScreen() {
    var obj = document.getElementById('editMark');
    if (obj.requestFullScreen) {
        obj.requestFullScreen();
    } else if (obj.webkitRequestFullScreen) {
        obj.webkitRequestFullScreen();
    } else if (obj.msRequestFullScreen) {
        obj.msRequestFullScreen();
    } else if (obj.mozRequestFullScreen) {
        obj.mozRequestFullScreen();
    }
}

function exitFullScreen() {
    var obj = document.getElementById('editMark');
    if (document.exitFullscree) {
        document.exitFullscree();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }
}

监听全屏事件

//监听全屏
    document.addEventListener('fullscreenchange', function () {
        if (document.fullscreenElement) {
          alert(1);
        } else {
          alert(2);
        }
    }, false);
    document.addEventListener('msfullscreenchange', function () {
        if (document.msFullscreenElement) {
           alert(1);
        } else {
           alert(2);
        }
    }, false);
    document.addEventListener('mozfullscreenchange', function () {
        if (document.mozFullScreen) {
            alert(1);
        } else {
            alert(2);
        }
    }, false);
    document.addEventListener('webkitfullscreenchange', function () {
        if (document.webkitIsFullScreen) {
           alert(1);
        } else {
             alert(2);
        }
    }, false);

以上是关于screenfull.js全屏状态监听的主要内容,如果未能解决你的问题,请参考以下文章

叫好用的全屏插件vue项目中

android 横屏状态,如何监听键盘的弹起与隐藏

点击按钮全屏,按esc退出全屏

js指定元素全屏并监听退出全屏

vue中实现浏览器全屏与退出全屏功能

元素全屏的设置与监听