HTML5 实现全屏效果

HTML5 实现全屏效果

点击进入全屏和点击退出全屏方法:

//进入全屏
function requestFullScreen() {
    var de = document.documentElement;
    if (de.requestFullscreen) {
        de.requestFullscreen();
    } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
    } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
    }
}
//退出全屏
function exitFullscreen() {
    var de = document;
    if (de.exitFullscreen) {
        de.exitFullscreen();
    } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
    } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen();
    }
}

只能点击进入全屏,不能一加载页面进去全屏

[案例]

    document.addEventListener('click',function(){
        requestFullScreen();
        //3秒钟自动退出全屏
        setTimeout(function(){
            exitFullscreen();
        },3000);
    });

你可能感兴趣的:(前端学习)