用html5 js實現點擊一個按鈕達到瀏覽器全屏效果

項目中需要將後台瀏覽器的視窗全屏，也就是我們點擊一個按鈕要實現按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;
}