프로젝트에서 배경 브라우저 창을 완전히 스크리닝해야합니다. 즉, F11 전체 화면을 누르는 효과를 얻으려면 버튼을 클릭해야합니다. HTML5에서 W3C는 풀 스크린 API를 공식화하여 전체 화면 효과를 달성 할 수 있으며 페이지에서 전체 화면 이미지, 비디오 등이 Google 15+, SAFRI5.1+, Firfox10+, IE11에서만 지원되는 풀 스크린 이미지를 갖도록 허용 할 수 있습니다.
전체 화면
var docelm = document.documentElement; // w3c if (docelm.requestfullscreen) {docelm.requestfullscreen (); } // firefox else if (docelm.mozrequestfullscreen) {docelm.MozRequestFullScreen (); } // ie11else 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.adeventListener ( "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-ufull-screen {배경 : 빨간색; } html : -webkit-full-screen {배경 : 빨간색; } html : 전체 화면 {배경 : 빨간색; }충수
1 온라인 데모
http://robnyman.github.io/fullscreen/
2 HTML5 피싱 용 전체 화면 API
http://www.36ria.com/5807
3 jQuery가 캡슐화 한 3 개의 전체 화면 플러그인
http://johndyer.name/native-fullscreen-javaScript-api-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/