元素全屏的设置与监听

最新推荐文章于 2024-01-22 11:18:26 发布

qq_45670012

最新推荐文章于 2024-01-22 11:18:26 发布

阅读量124

点赞数

分类专栏：前端文章标签： javascript

原文链接：https://www.mk2048.com/blog/blog.php?id=hbibhbh1bccb&title=%E5%85%83%E7%B4%A0%E5%85%A8%E5%B1%8F%E7%9A%84%E8%AE%BE%E7%BD%AE%E4%B8%8E%E7%9B%91%E5%90%AC

版权

前端专栏收录该内容

1223 篇文章 6 订阅

订阅专栏

作者网站：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);

更多专业前端知识，请上【猿2048】www.mk2048.com