오늘 직장에서 웹페이지의 전체 화면 표시가 필요하다는 요청을 발견해 바이두를 확인했고, 웹페이지 전체 화면 표시를 위한 jQuery 플러그인인 jquery FullScreen 플러그인을 찾았습니다. FF 10, 크롬, 사파리 등 다양한 브라우저에서 웹페이지를 전체 화면으로 표시할 수 있게 하며, 사용자가 확장<canvas>과 요소를 조절할 수 있는 더 읽기 쉬운 웹 페이지를 제공하는 데 사용됩니다<video>.
jQuery 풀스크린 플러그인
묘사
이 jQuery 플러그인은 현대 브라우저의 새로운 전체 화면 모드를 제어하는 간단한 메커니즘을 제공합니다. 현재는 최신 Webkit 기반 브라우저(크롬, 사파리), 파이어폭스, IE11+만이 이 새로운 전체 화면 기능을 제공합니다.
사용
전체 화면 모드 진입
전체 페이지나 단일 HTML 요소를 전체 화면 모드로 전환할 수 있습니다:
$(document).fullScreen(true);
$("#myVideo").fullScreen(true);
이 방법은 사용자가 입력한 상호작용(예: 버튼의 온클릭 이벤트)에 의해 코드가 트리거될 때만 작동합니다. 브라우저는 사용자의 상호작용 없이 전체 화면 모드에 들어갈 수 없습니다.
전체 화면 모드 종료
전체 화면 모드는 항상 문서를 통해 종료되지만, 이 플러그인은 어떤 HTML 요소에서도 종료할 수 있습니다. 선택한 HTML 요소의 소유자 문서가 사용되며, 그 다음에는 다음과 같습니다:
$(document).fullScreen(false);
$("#myVideo").fullScreen(false);
전체 화면 모드 쿼리
현재 상태를 쿼리할 때 fullScreen 메서드에 인자를 전달하지 않으면 됩니다. 이 메서드는 전체 화면 모드가 활성화되어 있을 때 현재 전체 화면 요소(또는 브라우저가 이를 지원하지 않는 경우 true)를 반환하고, 활성화되지 않으면 false, 브라우저가 전체 화면을 지원하지 않을 때는 null을 반환합니다 모드 자체를 말이죠. 따라서 이 방법은 브라우저가 전체 화면 모드를 지원할 때만 전체 화면 버튼을 표시하는 데도 사용할 수 있습니다:
$("#fullscreenButton").toggle($(document).fullScreen() != null))
전체 화면 모드 토글링
이 플러그인은 간단한 전체 화면 모드 토글을 위한 또 다른 방법을 제공합니다:
$(document).toggleFullScreen();
알림
이 플러그인은 전체 화면 모드가 변경되면 문서에서 전체 화면 변경 이벤트를 트리거합니다. 브라우저가 전체 화면 상태 변경을 거부하면 플러그인이 문서에서 fullscreenerror 이벤트를 트리거합니다. 예시:
$(document).bind("fullscreenchange", function() {
console.log("Fullscreen " + ($(document).fullScreen() ? " "on" : "off"));
});
$(document).bind("fullscreenerror", function() {
alert("브라우저가 전체 화면 변경을 거부함");
});
전체 화면 아이프레임
iframe 내에서 전체 화면 모드로 진입하는 것은 기본적으로 허용되지 않지만, iframe의 몇 가지 속성으로 활성화할 수 있습니다:
<iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
</iframe>
알려진 문제점
IE 11에서는 iframe 내에서 전체 화면으로 들어갈 때 빈 페이지가 표시됩니다. 왜 그런지는 전혀 모르겠어요. 도움 주시면 감사하겠습니다.
사파리(적어도 사파리 7)에서는 전체 화면 모드에서 키보드 입력이 허용되지 않습니다.
GitHub 주소: https://github.com/kayahr/jquery-fullscreen-plugin
관광객 여러분, 이 게시물의 숨겨진 내용을 보고 싶으시다면 부탁드립니다 회답
| 
게시됨 2017. 8. 14. 오후 4:34:52
|
|
|
게시됨 2017. 8. 14. 오후 5:08:18
|
게시됨 2017. 11. 25. 오후 2:35:17
|
