Programming
No. | 783 | ||||
Name. | swindler | ||||
Subject. | Browser Full Screen API | ||||
Main Cate. | Javascript | ||||
Sub Cate. | |||||
Date. | 2017-01-18 09:47 | ||||
Hit. | 3689 (121.78.49.66) | ||||
File. | |||||
왠지 나같으면 이런 API를 제공하지 않았을 것 같은데,, 어쨌든 있긴 있구나. FireFox, Chrome, Safari, Explorer 전부 다 되는듯. <script language=javascript> function fullScreen() { var el = document.documentElement, rfs = el.requestFullscreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen ; rfs.call(el); } function exitFullScreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } </script> 일부러, 두가지 형태로 소스를 구성했음. 아래는 Detecting 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); Styling fullscreen html:-moz-full-screen { background: red; } html:-webkit-full-screen { background: red; } html:-ms-fullscreen { background: red; width: 100%; /* needed to center contents in IE */ } html:fullscreen { background: red; } [바로가기 링크] : http://coolx.net/cboard/develop/783 |
|||||
|
|||||
[Modify] [Delete] | [Reply] [List] |