5,401,591 th visitor since 2017.2.1 ( Today : 929 )
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



swindler Full Screen 된 후에, 링크를 클릭하면 다시 원복된다. 2017-02-15
Name
Password
Comment
Copyright © 1999-2017, swindler. All rights reserved. 367,611 visitor ( 1999.1.8-2004.5.26 ), 2,405,771 ( -2017.01.31)

  2HLAB   2HLAB_Blog   RedToolBox   Omil   Omil_Blog