Відображення елемента в повноекраному режимі можливо за допомогою Fullscreen API яка появилася у HTML5.
Відображення елемента або цілого документу (веб-сторінка) відбувається на всю область екрану.
Щоб перевірити чи доступний повноекраний режим для поточного документу є властивість document.fullscreenEnabled яка містить логічне значення true або false. Але на жаль не всі браузери підтримують тому покладатися на 100% що доступний повноекраний режим не варто.
document.fullscreenEnabled= document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullScreenEnabled || document.msFullscreenEnabled;
if(document.fullscreenEnabled)
alert('Документ можна показати в повноекраному режимі.');
else alert('Повноекраний режим не доступний');
Зазвичай з метою безпеки браузер відхиляє показ елемента у повноекраному режимі, коли Element.requestFullScreen() не був викликаний зсередини короткострокового обробника подій, згенерованого користувачем. Тому метод requestFullScreen() потрібно викликати у подіях onclick і т.п.
Показуємо елемент на весь екран
Для відображення елемента на весь екран використовується метод requestFullscreen(), який можна викликати для будь якого елемента в документі.
var el = document.getElementById('test');
if(el.requestFullscreen)
el.requestFullscreen();
else alert(' Ваш браузер не підтримує метод Element.requestFullscreen!');
Різні браузери мають різні назви (префікси) методу, тому необхідний кросбраузерний варіант:
var el = document.getElementById('test');
el.requestFullscreen=el.requestFullscreen || el.webkitRequestFullscreen || el.mozRequestFullScreen || el.msRequestFullscreen;
if(el.requestFullscreen)
el.requestFullscreen();
else alert('Ваш браузер не підтримує requestFullscreen');
var el = document.getElementById('test');
//додаємо подію onclick
el.onclick=function(){
this.requestFullscreen=this.requestFullscreen || this.webkitRequestFullscreen || this.mozRequestFullScreen || this.msRequestFullscreen;
if(this.requestFullscreen)
this.requestFullscreen();
else alert('Ваш браузер не підтримує requestFullscreen');
}
Веб-сторінка у повноекраному режимі
Також можна показати всю веб-сторінку у повноекраному режимі визвавши метод requestFullscreen() для головного елемента документу document.documentElement:
Показати сторінку на повний екран.
document.getElementById('document_full_screen').onclick=function(){
document.documentElement.requestFullscreen=document.documentElement.requestFullscreen || document.documentElement.webkitRequestFullscreen || document.documentElement.mozRequestFullScreen || document.documentElement.msRequestFullscreen;
if(document.documentElement.requestFullscreen)
document.documentElement.requestFullscreen();
else alert('Ваш браузер не підтримує requestFullscreen');
}
Відображаємо веб-сторінку на весь екран по кліку.
document.body.onclick=function(){
if(document.body.requestFullscreen)
document.body.requestFullscreen();
else alert(' Ваш браузер не підтримує метод Element.requestFullscreen!');
}
Вихід з повноекраного режиму
Щоб вийти з повноекраного режиму достатньо натиснути клавішу Esc, F11 або "назад" у мобільних гаджетах.
Для виходу з повноекраного режиму за допомогою JavaScript виконується метод document.exitFullscreen(), також для різних браузерів є різні назви (префікси) даного методу.
document.exitFullscreen=document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen;
if(document.exitFullscreen)
document.exitFullscreen();
else alert('Ваш браузер не підтримує document.exitFullscreen()');
Для отримання елемента який відображений у повноекраному режимі використовується властивість document.fullscreenElement, яка повертає елемент який показаний в повноекраному режимі або null (деякі браузери undefined).
//для кросбраузерності
document.fullscreenElement=document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
alert(document.fullscreenElement);
Приклад відображення зображення у повноекраному режимі і виходу з нього по кліку на зображенні:
var img = document.getElementById('test2');
img.onclick=function(){
document.fullscreenElement=document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
if(this.getAttribute('fullscreen')=='true'){
this.setAttribute('fullscreen','false');
document.exitFullscreen=document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen;
if(document.exitFullscreen)document.exitFullscreen();
}else{
this.setAttribute('fullscreen','true');
this.requestFullscreen=this.requestFullscreen || this.webkitRequestFullscreen || this.mozRequestFullScreen || this.msRequestFullscreen;
if(this.requestFullscreen)this.requestFullscreen();
}
}
Функція показу вказаних елементів на весь екран по кліку на елементі:
function ElementFullScreen(elcss){
var el = document.querySelectorAll(elcss);
for(i=0;i<el.length;i++)
el[i].onclick=function(){
document.fullscreenElement=document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
if(this.getAttribute('fullscreen')=='true'){
this.setAttribute('fullscreen','false');
document.exitFullscreen=document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen;
if(document.exitFullscreen)document.exitFullscreen();
}else{
this.setAttribute('fullscreen','true');
this.requestFullscreen=this.requestFullscreen || this.webkitRequestFullscreen || this.mozRequestFullScreen || this.msRequestFullscreen;
if(this.requestFullscreen)this.requestFullscreen();
}
}
}
ElementFullScreen('img');
За допомогою CSS можна давати стилі елементу при відображенні на повноекраному режимі за допомогою: ":fullscreen".
#test3:fullscreen{
text-align:center;
color:blue;
padding:5px;
}
#test3:-webkit-full-screen {
text-align:center;
color:blue;
padding:5px;
}
#test:-moz-full-screen {
text-align:center;
color:blue;
padding:5px;
}
#test3:-ms-fullscreen {
text-align:center;
color:blue;
padding:5px;
}
показати/приховати
document.getElementById('test3').onclick=function(){
document.fullscreenElement=document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
if(this.getAttribute('fullscreen')=='true'){
this.setAttribute('fullscreen','false');
document.exitFullscreen=document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen;
if(document.exitFullscreen)document.exitFullscreen();
}else{
this.setAttribute('fullscreen','true');
this.requestFullscreen=this.requestFullscreen || this.webkitRequestFullscreen || this.mozRequestFullScreen || this.msRequestFullscreen;
if(this.requestFullscreen)this.requestFullscreen();
}
}