1. 程式人生 > >HTML5實現全屏API【進入和退出全屏】

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

【相容解決方案】

 1 //進入全屏
 2 function requestFullScreen() {
 3     var de = document.documentElement;
 4     if (de.requestFullscreen) {
 5         de.requestFullscreen();
 6     } else if (de.mozRequestFullScreen) {
 7         de.mozRequestFullScreen();
 8     } else if (de.webkitRequestFullScreen) {
 9         de.webkitRequestFullScreen();
10     }
11 }
12 //退出全屏
13 function exitFullscreen() {
14     var de = document;
15     if (de.exitFullscreen) {
16         de.exitFullscreen();
17     } else if (de.mozCancelFullScreen) {
18         de.mozCancelFullScreen();
19     } else if (de.webkitCancelFullScreen) {
20         de.webkitCancelFullScreen();
21     }
22 }

注:可能出於安全考慮,只能手動觸發才能實現全屏,瀏覽器自動執行無效果。

【例項】

document.body.addEventListener('click',function(){
    requestFullScreen();
    //5秒鐘自動退出全屏
    setTimeout(function(){
        exitFullscreen();
    },5000);
},false);