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

}

附錄

1 一個在線的Demo

http://robnyman.github.io/fullscreen/

2 HTML5全屏API之網絡釣魚

http://www.36ria.com/5807

3 jquery封裝的全屏插件

http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

4 更加詳細的全屏API介紹

4.1https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

4.2 https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html