Полноэкранный режим при загрузке

Question

мой вопрос прост: есть ли простой способ загрузить веб-страницу в полноэкранном режиме (например, когда вы нажимаете F11) в первый раз, когда вы вводите его? (Без нажатия клавиши F11 или конкретный штрих для полноэкранного просмотра)

Это для презентации (как презентация PowerPoint), которую я сделал с использованием HTML/CSS (мой клиент хотел что-то более «динамическое», чем обычный материал powerpoint), поэтому нет проблем с нарушениями или проблемами с пользователями, поскольку он не будет подключен к сети и будет использоваться только для проведения конгрессов и внутренних встреч.

Заранее благодарен!

Answer 1

Недавно я также столкнулся с этой проблемой.

Для последних версий браузеров, таких как Chrome, Mozilla вы можете использовать WebKit ˙U https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

но probelm лежит то есть и safari.As в то есть это полный scrren апи не поддерживается и в сафари вы не можете пользователь ключевой ввод в полноэкранном режиме (рассмотрите случай, когда вы спрашиваете пользователя, какой слайд вы хотите посетить) .Подробнее код должен помочь.

в случае Дж.С. сделать что-то вроде

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>