웹 페이지에서 전체 화면 요소 만들기

페이지 전체 화면에 요소를 만들 계획이 있습니까?웹 페이지에서 전체 화면 요소 만들기

예를 들어 div 또는 img?

"전체 화면"이란 전체 화면 모델로 비디오를 볼 때와 마찬가지로 사용자 화면의 모든 공간을 차지해야한다는 의미입니다. 브라우저 창의 작업 표시 줄/메뉴 표시 줄을 표시하고 싶지 않습니다.

아이디어가 있으십니까?

div.fullscreen{ 
    display:block; 

    /*set the div in the top-left corner of the screen*/ 
    position:absolute; 
    top:0; 
    left:0; 

    /*set the width and height to 100% of the screen*/ 
    width:100%; 
    height:100%; 
    background-color:red 
    }

내가 그러나 그렇지 내가 원하는 것입니다, 위의 코드를 시도, 그것은 브라우저의 컨텐츠 영역이 아닌 사용자의 computer'screen의 모든 공간을 JUSE.

출처

2011-03-04 hguser

수 없습니다. 사용자가 브라우저를 전체 화면에 띄우는 경우에만. –

가능한 [Javascript 전체 화면 창 (화면 전체에 스트레칭) 만드는 방법] 중복 가능 (http://stackoverflow.com/questions/1125084/how-to-make-in-javascript-full-screen-windows- stretch-all-over-the-screen) –

div와 같이 작은 부분 만 전체 화면으로 표시하려고하면 여기에 중복되지 않습니다. 전체 페이지 –

HTML 요소는 브라우저 문서 창 경계에서 벗어날 수 없습니다. 메뉴와 도구 모음은 문서 창 (브라우저 창의 하위 항목) 외부에 있으므로 "도달"할 수 없습니다.

유일한 해결책은 JavaScript로 전체 화면 모드를 트리거하는 것입니다. How to make the window full screen with Javascript (stretching all over the screen)

출처

2011-03-04 14:14:57

멍청이가이 문제에이를 수 있습니까? 페이지에 플래시를 넣는 거니? youtube와 같은 일부 비디오 사이트에서는 전체 화면 모델로 선택할 수 있습니다. – hguser

그리고 실제로 내가하려는 것은 여기에서 찾을 수 있습니다 : http : //stackoverflow.com/questions/5192286/create-a-page-which-contain-a-flash-can-be-add-text- dynamiclly – hguser

예, 브라우저 창을 완전히 숨 깁니다. 플래시로 표시해야합니다 (HTML이 아닌). –

이것은 현재 가능하지 않으며 아마도 불가능할 것입니다.

방문하는 모든 웹 사이트에서 데스크톱을 관리해야한다면 어떻게 될지 상상해보십시오.

출처

2011-03-04 14:14:02 Jon

설치하는 모든 응용 프로그램이 바탕 화면을 차지할 수있는 자유가 없습니다 ... 왜 웹 응용 프로그램에 동일한 고급 기능을 제공 할 수 있습니까? – zzzzBov

@zzzzBov : 첫 번째 인스턴스에서는 응용 프로그램 설치를 명시 적으로 결정 했으므로 (설치 중에 관리자 권한이 부여 될 가능성이 높습니다), 두 번째 단계에서는 모든 종류의 드라이브 바이 공격에 노출 될 수 있기 때문입니다. 분명히 전체 화면 브라우저 창은 옵션이지만, 전체 화면을 차지하지는 않습니다. 브라우저에 할당 된 일부분 일뿐입니다. – Jon

개발자가 기능을 사용하는 방법을 제한하면 드라이브 바이 공격에 노출되지 않습니다. – zzzzBov

가 요소 전체 화면을 만들 수있는 비교적 새로운 fullscreen JavaScript api 있습니다 :

이 대답은 당신이 그렇게 할 수있는 방법을 보여줍니다.

이 가능 남용을 방지하기 위해 사용자 입력의 결과로 호출 할 수있다,하지만 사용하기가 비교적 솔직 :

_{코드 MDN에서 기사 :}

document.addEventListener("keydown", function(e) { 
    if (e.keyCode == 13) { 
    toggleFullScreen(); 
    } 
}, false); 

function toggleFullScreen() { 
    if (!document.fullscreenElement && // alternative standard method 
     !document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods 
    if (document.documentElement.requestFullscreen) { 
     document.documentElement.requestFullscreen(); 
    } else if (document.documentElement.mozRequestFullScreen) { 
     document.documentElement.mozRequestFullScreen(); 
    } else if (document.documentElement.webkitRequestFullscreen) { 
     document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); 
    } 
    } else { 
    if (document.cancelFullScreen) { 
     document.cancelFullScreen(); 
    } else if (document.mozCancelFullScreen) { 
     document.mozCancelFullScreen(); 
    } else if (document.webkitCancelFullScreen) { 
     document.webkitCancelFullScreen(); 
    } 
    } 
}

출처

2013-07-14 23:32:02 zzzzBov

웹 페이지에서 전체 화면 요소 만들기

답변

관련 문제