로드시 전체 화면

Question

내 질문은 간단합니다. 처음 입력 할 때 F11 키를 누를 때처럼 전체 화면 모드로 웹 페이지를로드하는 쉬운 방법이 있습니까? (F11이나 특정 버튼을 누르지 않아도 전체 화면으로 이동)

HTML/CSS를 사용하여 만든 프레젠테이션 (내 파워 포인트 프레젠테이션처럼) 온라인이 아니기 때문에 회의 및 내부 회의에만 사용되기 때문에 '위반'이나 사용자 경험 문제가 없습니다.

미리 감사드립니다.

Answer 1

최근에 나는 또한이 문제에 직면했다.

크롬, 모질라와 같은 브라우저의 최신 버전 당신은 웹킷에게 U https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

를 사용할 수 있지만 probelm이 전체 scrren API가 지원되지 않는 IE와 IE에서 safari.As와 거짓말과 사파리에서는 사용자 수 없습니다 전체 화면 모드에서 키 입력 (사용자가 방문하고 싶은 슬라이드를 묻는 경우를 고려하십시오.) 코드가 도움이됩니다. 이 대답은 당신을 도울 수 있습니다 JS의 경우

지금

function requestFullScreen(image1) { 
    var image = document.getElementById(image1); 

    image.style.width=(0.70*screen.width)+'px'; 
    image.style.height=(0.96*screen.height)+'px'; 

    // Get the element that we want to take into fullscreen mode 
     var element = parent.document.getElementById('imageFullScreen'); 
     if(element.requestFullScreen) { 
      element.requestFullScreen(); 
     } else if (element.mozRequestFullScreen) { 
      // This is how to go into fullscren mode in Firefox 
      element.mozRequestFullScreen(); 
     } else if (element.webkitRequestFullScreen) { 
      // This is how to go into fullscreen mode in Chrome and Safari 
      element.webkitRequestFullScreen(); 
     }else if (typeof window.ActiveXObject !== "undefined") { // Older IE. 
     document.getElementById('imageFullScreen').style.width="100%"; 
     document.getElementById('imageFullScreen').style.height="100%"; 
     image.style.height=(0.96*$(window).height())+"px"; 
     document.getElementById('showFullScreen').style.display='none'; 
     document.getElementById('cancelFullScreen').style.display='inline'; 
     document.getElementById("ieCheck").value="true"; 
     } 
} 



//to close full screen manually 
function cancelFullscreen() { 
    if(document.cancelFullScreen) { 
     document.cancelFullScreen(); 
    } else if(document.mozCancelFullScreen) { 
     document.mozCancelFullScreen(); 
    } else if(document.webkitCancelFullScreen) { 
     document.webkitCancelFullScreen(); 
    } else if (typeof window.ActiveXObject !== "undefined"){ 
    IEtoggleSmallScreen(); 
    } 

} 


//listners to change at full screen and small screen 

document.addEventListener("fullscreenchange", function() { 
    if(document.fullScreen){ 
     document.getElementById('showFullScreen').style.display='none'; 
     document.getElementById('cancelFullScreen').style.display='inline'; 
    }else{ 
     document.getElementById('showFullScreen').style.display='inline'; 
     document.getElementById('cancelFullScreen').style.display='none'; 
    } 
}); 



document.addEventListener("mozfullscreenchange", function() { 
    if(document.mozFullScreen){ 
     document.getElementById('showFullScreen').style.display='none'; 
     document.getElementById('cancelFullScreen').style.display='inline'; 
    }else{ 
     document.getElementById('showFullScreen').style.display='inline'; 
     document.getElementById('cancelFullScreen').style.display='none'; 
    } 
}); 

document.addEventListener("webkitfullscreenchange", function() { 
if(document.webkitIsFullScreen){ 
    document.getElementById('showFullScreen').style.display='none'; 
    document.getElementById('cancelFullScreen').style.display='inline'; 
}else{ 
    document.getElementById('showFullScreen').style.display='inline'; 
    document.getElementById('cancelFullScreen').style.display='none'; 
} 

}); 

//to change screen size in i.e 
function IEtoggleSmallScreen(){ 
    document.getElementById('showFullScreen').style.display='inline'; 
    document.getElementById('cancelFullScreen').style.display='none'; 
    document.getElementById('imageFullScreen').style.width=638+"px"; 
    document.getElementById('imageFullScreen').style.height=479+"px"; 
} 

// toc check esc functuonlaity for ie 
$(document).keyup(function(e) { 
    if (e.keyCode == 27) { 
    var check = document.getElementById("ieCheck"); 
    if(check.value=="true"){ 
     IEtoggleSmallScreen(); 
     check.value="false"; 
    } 
    } 
    }); 

같은 것이 HTML에 대한

<div id="imageFullScreen" class="imageFullScreen" style="width: 700px;height:400px;background-color:blue; center;text-align: center;" > 
<img id="image" src="<%=imageUrl%>=1" style="max-height: 96%;max-width: 100%;width: 100%;height: 100%"> 

<div id="btnCentre" style="text-align: center;"> 
<input type="hidden" id="ieCheck" value="false"> 
<input type="button" value="Full Screen" onclick="requestFullScreen('image');" id="showFullScreen" style="max-height: 4%"> 
<input type="button" value="Cancel Screen" onclick="cancelFullscreen();" id="cancelFullScreen" style="display: none;" style="max-height: 4%"> 
</div> 
</div>