AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

Перевод в полно экранный режим браузера на javascript

Вариант 1: Открыть новое окно на весь экран (Open Full Screen Window)

Вариант 2: Открыть новое окно на весь экран (Open Full Screen Window)

Вариант 3: Html5 Fullscreen API

Исходный код этого примера:

<script type="text/javascript"><!--
function fullScreen1(theURL) {
window.open(theURL, '', 'fullscreen=yes,scrollbars=auto,menubar=no,toolbar=no,location=no,status=no');
}
//--></script>

<a href="#" onClick="fullScreen1('http://htmlweb.ru/java/example/full_screen.php');return false;">
	Вариант 1: Открыть новое окно на весь экран (Open Full Screen Window)</a>
<br /><br />

<script type="text/javascript"><!--
function fullScreen2(theURL) {
window.open(theURL, '','height='+screen.height+',width='+screen.width+',screenX=0,screenY=0,left=0,top=0,resizable=no');
}
//--></script>

<a href="#" onClick="fullScreen2('http://htmlweb.ru/java/example/full_screen.php');return false;">
	Вариант 2: Открыть новое окно на весь экран (Open Full Screen Window)</a>
<br /><br />


<script type="text/javascript"><!--
//Ищем правильный метод
function fullscreen3(element) {
  if(element.requestFullScreen) {
    element.requestFullScreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }
}

//псевдокласс
//:-webkit-full-screen {  background: pink;}

//fullscreen3(document.documentElement); //вся страница
//fullscreen3(document.getElementById("videoElement")); //какой-то определенный элемент
//--></script>

<a href="#" onClick="fullscreen3(document.documentElement);return false;">
	Вариант 3: Html5 Fullscreen API</a>


Вариант для IE:

<script type="text/javascript"><!--
var ws=new ActiveXObject("WScript.Shell");
function clc(){
  ws.SendKeys("{F11}");
}
</script>
<button onclick="clc()">Click</button>

Про метод SendKeys можно почитать здесь

Если Вы хотите запретить переключать окна/вкладки добавьте к body onBlur="self.focus()";

Некоторые пользователи могут не знать, как выйти из полноэкранного режима. Например, в Windows это можно сделать с помощью комбинации клавиш Alt+F4. Вы должны обеспечить пользователя информацией по поводу того, как вернуться из полноэкранного режима в обычный.

FireFox и "kiosk" mode

Если вам понадобитья при запуске Mozilla Firefox использовать в терминале самообслуживания или в чем-то подобном, Вам могут пригодиться следующие плагины:

Методы HTML5 для работы в полноэкранном режиме

// mozilla proposal
document.requestFullScreen();
document.cancelFullScreen();

// Webkit (works in Safari and Chrome Canary)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();

// Firefox (works in nightly)
element.mozRequestFullScreen();
document.mozCancelFullScreen();

// W3C Proposal
element.requestFullscreen();
document.exitFullscreen();

Псевдо-классы CSS для полноэкранного режима

Благодаря специальным псевдо классам CSS, вы можете изменить размеры некоторых элементов страницы при переходе в полно-экранный режим:

/* изменяем размер шрифта */
:-webkit-full-screen {
  font-size: 16px;
}
:-moz-full-screen {
  font-size: 16px;
}

/*меняем отдельный элемент */
:-webkit-full-screen img {
  width: 100%;
  height: 100%;
}
:-moz-full-screen img {
  width: 100%;
  height: 100%;
}

.

© Copyright 2008-2016 by KDG