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

Открыть новое окно на весь экран (Вариант 1)

Открыть новое окно на весь экран (Вариант 2)

Открыть новое окно на весь экран (Вариант 3)

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

<script>
function fullScreen1(theURL) {
    window.open(theURL, '', 'fullscreen=yes,scrollbars=auto,menubar=no,toolbar=no,location=no,status=no');
}
function fullScreen2(theURL) {
    window.open(theURL, '','height='+screen.height+',width='+screen.width+',screenX=0,screenY=0,left=0,top=0,resizable=no');
}
//Ищем правильный метод
function fullscreen3(element) {
    if(element.requestFullScreen) {
        element.requestFullScreen();
    } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if(element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    }
}
</script>

<p>
  <a href="#" onClick="fullScreen1('http://htmlweb.ru/java/example/full_screen.php');return false;">
    Открыть новое окно на весь экран (Вариант 1)
  </a>
</p>
<p>
  <a href="#" onClick="fullScreen2('http://htmlweb.ru/java/example/full_screen.php');return false;">
    Открыть новое окно на весь экран (Вариант 2)
  </a>
</p>
<p>
  <a href="#" onClick="fullscreen3(document.documentElement);return false;">
      Открыть новое окно на весь экран (Вариант 3)
  </a>
</p>

Вариант для 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()";

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

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

// IE
document.msRequestFullscreen();
document.msCancelFullScreen();

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

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

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

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

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

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