項目中需要將後台浏覽器的窗口全屏，也就是我們點擊一個按鈕要實現按F11全屏的效果。 在Html5中,W3C制定了關於全屏的API，就可以實現全屏幕的效果，也可以讓頁面中的圖片，視頻等全屏目前只有google Chrome 15 +, safri5.1+,firfox10+,IE11支持

全屏

var docElm = document.documentElement;
//W3C 
if (docElm.requestFullscreen) { 
    docElm.requestFullscreen(); 
}
//Firefox 
else if (docElm.mozRequestFullScreen) { 
    docElm.mozRequestFullScreen(); 
}
//Chrome等 
else if (docElm.webkitRequestFullScreen) { 
    docElm.webkitRequestFullScreen(); 
}
//IE11
else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
}

退出全屏

if (document.exitFullscreen) { 
    document.exitFullscreen(); 
} 
else if (document.mozCancelFullScreen) { 
    document.mozCancelFullScreen(); 
} 
else if (document.webkitCancelFullScreen) { 
    document.webkitCancelFullScreen(); 
}
else if (document.msExitFullscreen) {
      document.msExitFullscreen();
}

事件監聽

document.addEventListener("fullscreenchange", function () { 
    fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false); 
   
document.addEventListener("mozfullscreenchange", function () { 
    fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false); 
   
document.addEventListener("webkitfullscreenchange", function () { 
    fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false);
document.addEventListener("msfullscreenchange", function () {
    fullscreenState.innerHtml = (document.msFullscreenElement)? "" : "not ";}, false);

全屏樣式設置

在浏覽器全屏的使用我們還可以進行樣式設置

html:-moz-full-screen { 
    background: red; 
} 
   
html:-webkit-full-screen { 
    background: red; 
} 
   
Html:fullscreen { 
    background: red; 
}