活到老学到老  

记录遇到问题的点点滴滴。

HTML5实现全屏API【进入和退出全屏】

7年前发布  · 1656 次阅读

现在主流浏览器基本上实现了全屏效果,但是不同浏览器实现不一样:

【进入和退出全屏】

// Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();
 
// Firefox 10+
element.mozRequestFullScreen();
document.mozCancelFullScreen();
 
// W3C 提议
element.requestFullscreen();
document.exitFullscreen();

【兼容解决方案】

/**
 * 进入全屏
 */
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.body.addEventListener('click',function(){
    requestFullScreen();
    //5秒钟自动退出全屏
    setTimeout(function(){
        exitFullscreen();
    },5000);
},false);