전체 화면_javascript 기술로 페이지 요소를 표시하는 javascript 전체 화면 방법

가장 간단한 방법 중 하나는 전체 화면에 표시하려는 구성 요소의 스타일을 동적으로 변경하는 것입니다. 예를 들어 위치는 절대값이 되고, 높이와 너비는 창 크기로 설정되고, 배경색은 전체 화면으로 변경됩니다. 흰색(페이지의 나머지 요소를 덮기 위해). 이런 방식으로 강조 표시하려는 구성 요소만 웹 페이지에서 볼 수 있으며 이는 시각적으로 전체 화면과 동일합니다. 동시에 JavaScript는 키보드 이벤트를 모니터링하는 데 사용됩니다. 사용자가 ESc 종료 키를 누르면 원래 상태로 돌아갑니다. 코드의 일부는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

document.onkeydown = function(event) {
var e = 이벤트 || window.event || 인수.callee.caller.arguments[0];
if (e && e.keyCode == 27) { //ESC 키

$(' .navbar-inner').fadeIn(100);
var maintable = document.getElementById("holder");
maintable.style.position = "relative";
maintable.style. height = " 100%";
maintable.style.width = "100%";
maintable = document.getElementById("main"); maintable.style.height = "100%";
메인테이블 .style.width = "100%";
maintable.style.left = 0 "px";
maintable.style.top = 0 "px";
resizePlots();
}
};

fullScreenClick: 함수 () {

$('.navbar-inner').fadeOut(100);

var maintable = document.getElementById("holder");

maintable.style.position = "절대";
maintable.style.Background = "#fff";
//maintable.style .zIndex = 5;
maintable.style.height = $(window).height() "px";
maintable.style.width = $(window).width() "px";
maintable.style.left = 0 "px";
maintable.style.top = 0 "px";
maintable = document.getElementById("main");
maintable.style.height = "90 %";
maintable.style.width = "90%";
maintable.style.left = $(window).width() * 0.05 "px";
maintable.style.top = $ (window).height() * 0.02 "px";
resizePlots();
},

그러나 이 방법을 사용하려면 수동으로 F11을 눌러야 한다는 단점이 있습니다. 진정한 전체 화면.
F11을 직접 누르지 않는 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

전체 화면

Weibo에서 서로를 팔로우하는 것을 환영합니다!

weibo.com/leavingseason

음악을 믿으세요, 메이데이를 믿으세요

<script> <P>document.getElementById("btn").onclick=function(){ <BR> var elem = document.getElementById("content") <BR>requestFullScreen (요소) <BR>}; <BR>function requestFullScreen(element) {<P> var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || <br> if (requestMethod) { <br> requestMethod.call(element); } else if (typeof window.ActiveXObject !== "정의되지 않음") { <P> var wscript = new ActiveXObject("WScript.Shell ");<BR> if (wscript !== null) {<BR> wscript.SendKeys("{F11}");<BR> }<BR> }<BR>} <BR> <BR></script>

대부분의 브라우저를 지원할 수 있습니다. 그러나 성가신 IE는 여전히 HTML5의 전체 화면 기능을 지원할 수 없으며 F11을 누르는 동작을 시뮬레이션해야 합니다. 독자는 코드에서 이를 볼 수 있습니다.

코드에서 전체 화면 인터페이스를 종료할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

function cancelFullScreen(el) {
var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;
                                        } else if ( window.ActiveXObject 유형 !== "정의되지 않음") { // 이전 I E.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
var wscript.SendKeys("{F11}");
                                      ~ 모든 기기는 전체 화면 기능과 호환됩니다. . 아시는 분 계시면 공유해주시면 정말 감사하겠습니다.

업데이트(2013/09/22)

전체 화면으로 전환할 때 맞춤 작업을 하고 싶은 경우가 많습니다. 이벤트는 다음과 같이 바인딩될 수 있습니다:

코드 복사

코드는 다음과 같습니다.

document.addEventListener("fullscreenchange", function () { doit();}, false);document.addEventListener("mozfullscreenchange", function () {

doit();

}, false) ;

document.addEventListener("webkitfullscreenchange", function () {
doit();
}, false);


전체 화면으로 들어가거나 종료됩니다. 때마다 doit() 작업이 트리거됩니다.