Chrome Fullscreen API

Chrome Fullscreen API

---

이 기사 에 따르면 Google Chrome 15에는 전체 화면 JavaScript API가 있습니다.

나는 그것을 작동 시키려고 노력했지만 실패했다. 나는 또한 공식 문서를 헛되이 검색했습니다.

전체 화면 JavaScript API는 어떻게 생겼습니까?

---

API는 사용자 상호 작용 중에 만 작동하므로 악의적으로 사용할 수 없습니다. 다음 코드를 시도하십시오.

addEventListener("click", function() {
    var el = document.documentElement,
      rfs = el.requestFullscreen
        || el.webkitRequestFullScreen
        || el.mozRequestFullScreen
        || el.msRequestFullscreen 
    ;

    rfs.call(el);
});

---

접두사 혼란을 완화하고 다른 구현에서 일부 불일치를 수정하기 위해 screenfull.js 라는 Fullscreen API 용 간단한 래퍼를 만들었습니다 . 전체 화면 API의 작동 방식을 보려면 데모 를 확인하세요 .

추천 자료 :

• 웹 브라우저에서 전체 화면 API 사용
• MDN-전체 화면 API

---

다음은 브라우저에서 전체 화면으로 작업하기 위해 만든 몇 가지 기능입니다.

대부분의 주요 브라우저에서 전체 화면 진입 / 종료를 모두 제공합니다.

function isFullScreen()
{
    return (document.fullScreenElement && document.fullScreenElement !== null)
         || document.mozFullScreen
         || document.webkitIsFullScreen;
}


function requestFullScreen(element)
{
    if (element.requestFullscreen)
        element.requestFullscreen();
    else if (element.msRequestFullscreen)
        element.msRequestFullscreen();
    else if (element.mozRequestFullScreen)
        element.mozRequestFullScreen();
    else if (element.webkitRequestFullscreen)
        element.webkitRequestFullscreen();
}

function exitFullScreen()
{
    if (document.exitFullscreen)
        document.exitFullscreen();
    else if (document.msExitFullscreen)
        document.msExitFullscreen();
    else if (document.mozCancelFullScreen)
        document.mozCancelFullScreen();
    else if (document.webkitExitFullscreen)
        document.webkitExitFullscreen();
}

function toggleFullScreen(element)
{
    if (isFullScreen())
        exitFullScreen();
    else
        requestFullScreen(element || document.documentElement);
}

---

다음 테스트는 X86의 Chrome 16 (dev 브랜치) 및 Mac OSX Lion의 Chrome 15에서 작동합니다.

http://html5-demos.appspot.com/static/fullscreen.html

---

Google의 클로저 라이브러리 프로젝트에는 작업을 수행하는 모듈이 있으며 아래는 API 및 소스 코드입니다.

클로저 라이브러리 fullscreen.js API

클로저 libray fullscreen.js 코드

참고 URL : https://stackoverflow.com/questions/7836204/chrome-fullscreen-api