김효원, Swindler, coolx 님의 홈페이지

Programming

No.

783

Name.

swindler

Subject.

Browser Full Screen API

Main Cate.

Javascript

Sub Cate.

Date.

2017-01-18 09:47

Hit.

3686 (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


[Modify] [Delete]		[Reply] [List]