Відображаємо елемент в повноекраному режимі

Публікації

Відображення елемента в повноекраному режимі можливо за допомогою Fullscreen API яка появилася у HTML5.

Відображення елемента або цілого документу (веб-сторінка) відбувається на всю область екрану.

Щоб перевірити чи доступний повноекраний режим для поточного документу є властивість document.fullscreenEnabled яка містить логічне значення true або false. Але на жаль не всі браузери підтримують тому покладатися на 100% що не доступний повноекраний режим не варто.

document.fullscreenEnabled= document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullScreenEnabled || document.msFullscreenEnabled; if(document.fullscreenEnabled) alert('Документ можна показати в повноекраному режимі.'); else alert('Повноекраний режим не доступний');

Показуємо елемент на весь екран

Для відображення елемента на весь екран використовується метод 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');
#test

Зазвичай з метою безпеки браузер відхиляє показ елемента у повноекраному режимі, коли Element.requestFullScreen() не був викликаний зсередини короткострокового обробника подій, згенерованого користувачем. Тому метод requestFullScreen() потрібно викликати у подіях onclick і т.п.

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'); }

Вихід з повноекраного режиму

Щоб вийти з повноекраного режиму достатньо натиснути клавішу 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; }
Приклад стилю :fullscreen
показати/скрити
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(); } }
Адмін 2017-10-15 18:05:55

Тільки зареєстровані користувачі можуть писати коментарі.