Получение полноэкранного режима в моем браузере с помощью jquery

Как я могу войти в полноэкранный режим, используя только код Javascript/JQuery? Цель состоит в том, чтобы войти в полноэкранный режим, например, когда вы нажимаете F11 в браузере, но затем программно.

Ответ 1

Вы можете активировать полноэкранный режим с использованием ванильного JavaScript без jQuery.

<!DOCTYPE html>

<html>

<head>
    <title>Full Screen Test</title>
</head>

<body id="body">
    <h1>test</h1>

    <script>
    var elem = document.getElementById("body");

    elem.onclick = function() {
        req = elem.requestFullScreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen;
        req.call(elem);
    }
    </script>
</body>

</html>

Важно отметить, что вы можете запрашивать только полноэкранный режим, когда пользователь выполняет действие (например, щелчок). Вы не можете запрашивать полноэкранный режим без действия пользователя ^[1] (например, при загрузке страницы).

Вот кросс-браузерная функция для переключения полноэкранного режима (полученного из MDN):

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

Для получения дополнительной информации посетите страницу MDN на полноэкранном интерфейсе API.

Ответ 2

Здесь приведена рабочая демонстрация для полнотекстового просмотра браузера

http://johndyer.name/lab/fullscreenapi/

Ответ 3

Вы можете использовать свободно доступные jquery-плагины для этой цели, проверьте these- jquery full screen, Jquery full screen, jquery full screen

Ответ 4

Новая технология html5 - полноэкранный API дает нам простой способ представить содержимое веб-страницы в полноэкранном режиме. Мы собираемся предоставить вам подробную информацию о полноэкранном режиме. Просто попробуйте представить обо всех возможных преимуществах, которые вы можете использовать с помощью этой технологии - полноэкранных фотоальбомов, видеороликов и даже игр.

Но прежде чем мы опишем эту новую технологию, я должен отметить, что эта технология экспериментальна и поддерживается всеми основными браузерами.

Вы можете найти полный учебник здесь: http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/

Здесь работает демо: http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm

Ответ 5

Если вам нужен плагин, поддерживающий версии IE до IE11 (IE8-10), посмотрите на jQuery.fullscreen. IE не поддерживал эту функцию изначально до IE11.

Ответ 6

Если вам нужна JQuery, чтобы упростить выбор элементов, вы можете сделать это:

var viewer = $("#parentid .classname .childelement")[0];
var rFS = viewer.mozRequestFullScreen || viewer.webkitRequestFullscreen || viewer.requestFullscreen;
    rFS.call(viewer);

Ответ 7

Попробуйте ниже код

var el = document.documentElement,
  rfs = el.requestFullscreen
    || el.webkitRequestFullScreen
    || el.mozRequestFullScreen
    || el.msRequestFullscreen 
;

rfs.call(el);

Ответ 8

Это старый вопрос, но, возможно, кому-то это может понадобиться. Я искал решение для получения полноэкранного режима для браузера с помощью jQuery, и я нашел это решение. Я настоятельно рекомендую плагин Sindre Sorhus screenfull.js. Здесь вы можете получить файл.

https://github.com/sindresorhus/screenfull.js

На этой странице также можно найти информацию о том, как это сделать.

Ответ 9

Попробуйте с помощью метода window.resizeTo(x, y).

var  w = window.open('','', 'width=100,height=100');

w.resizeTo(w.screen.availHeight, w.screen.availWidth);

 w.focus();

Ответ 10

Если у вас есть кнопка или что-то еще, мы можем использовать этот скрипт:

<script language="JavaScript">
function fullScreen() {
    var el = document.documentElement
        , rfs = // for newer Webkit and Firefox
               el.requestFullScreen
            || el.webkitRequestFullScreen
            || el.mozRequestFullScreen
            || el.msRequestFullScreen
    ;
    if (typeof rfs != "undefined" && rfs) {
        rfs.call(el);
    } else if (typeof window.ActiveXObject != "undefined") {
        // for Internet Explorer
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }

}
// End -->

С помощью кнопки. Все легко с помощью <a href="javascript:void(0);" onclick="fullScreen();"><BUTTON></a> <a href="javascript:void(0);" onclick="fullScreen();"><BUTTON></a>
Но как загрузить этот скрипт в pageload. Это означает, что веб-форма будет полноэкранным в pageload без какого-либо нажатия на что-либо.