html5 js를 사용하면 버튼_javascript 기술을 클릭하여 전체 화면 브라우저 효과를 얻을 수 있습니다.

프로젝트에서 배경 브라우저 창을 전체 화면으로 만들어야 합니다. 즉, 버튼을 클릭하면 F11을 누르는 전체 화면 효과를 얻을 수 있습니다. HTML5에서 W3C는 전체 화면 효과를 구현하고 페이지의 사진, 비디오 등을 전체 화면으로 만들 수 있는 전체 화면 API를 개발했습니다. 현재 Google Chrome 15, safri5.1, fifox10, 및 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 온라인 데모

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

2 HTML5 전체화면 API 피싱

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

jquery로 캡슐화된 3개의 전체 화면 플러그인

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

4 전체 화면 API에 대한 자세한 소개

4.1 https://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

5 FireFox/Chrome의 HTML5 전체 화면 API 표시 차이점

http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/