HTML5實現全屏API【進入和退出全屏】

現在主流瀏覽器基本上實現了全屏效果，但是不同瀏覽器實現不一樣：

【進入和退出全屏】

// 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);