Как сделать окно полноэкранным с помощью Javascript (растягивая по всему экрану)

Question

Как сделать так, чтобы браузер посетителя работал в полноэкранном режиме с использованием JavaScript, таким образом, чтобы он работал с IE, Firefox и Opera?

Answer 1

В новых браузерах, таких как Chrome 15, Firefox 10, Safari 5.1, IE 10, это возможно. Это также возможно для старых IE через ActiveX в зависимости от настроек браузера.

Вот как это сделать:

function requestFullScreen(element) {
    // Supports most browsers and their versions.
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

    if (requestMethod) { // Native full screen.
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}

var elem = document.body; // Make the body go full screen.
requestFullScreen(elem);

Пользователь, очевидно, должен сначала принять полноэкранный запрос, и нет возможности автоматически запустить его при загрузке страницы, его должен вызвать пользователь (например, кнопка)

Подробнее: https://developer.mozilla.org/en/DOM/Using_full-screen_mode

Answer 2

Этот код также включает в себя, как включить полноэкранный режим для Internet Explorer 9 и, возможно, более старых версий, а также самые последние версии Google Chrome. Принятый ответ также может быть использован для других браузеров.

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

Источники:

• Chrome Fullscreen API (однако обратите внимание, что requestFullscreen "работает только во время" "[m] oEST UIEvents и MouseEvents, таких как щелчок и нажатие клавиши и т. Д.", "Поэтому его нельзя использовать злонамеренно".)
• Как сделать браузер полноэкранным, используя событие клавиши F11 через JavaScript

Answer 3

Это как можно ближе к полноэкранному режиму в JavaScript:

<script type="text/javascript">
    window.onload = maxWindow;

    function maxWindow() {
        window.moveTo(0, 0);

        if (document.all) {
            top.window.resizeTo(screen.availWidth, screen.availHeight);
        }

        else if (document.layers || document.getElementById) {
            if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
                top.window.outerHeight = screen.availHeight;
                top.window.outerWidth = screen.availWidth;
            }
        }
    }
</script> 

Answer 4

Вот полное решение для входа и выхода из полноэкранного режима (он же отмена, выход, выход)

        function cancelFullScreen(el) {
            var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;
            if (requestMethod) { // cancel full screen.
                requestMethod.call(el);
            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }

        function requestFullScreen(el) {
            // Supports most browsers and their versions.
            var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;

            if (requestMethod) { // Native full screen.
                requestMethod.call(el);
            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
            return false
        }

        function toggleFull() {
            var elem = document.body; // Make the body go full screen.
            var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) ||  (document.mozFullScreen || document.webkitIsFullScreen);

            if (isInFullScreen) {
                cancelFullScreen(document);
            } else {
                requestFullScreen(elem);
            }
            return false;
        }

Answer 5

Вы можете использовать Полноэкранный API Вы можете увидеть пример здесь

Полноэкранный API предоставляет простой способ для веб-контента представлены с использованием всего экрана пользователя. Эта статья предоставляет информация об использовании этого API.

Answer 6

Новая технология 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

Answer 7

Я использовал это ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
    <script language="JavaScript">
        function fullScreen(theURL) {
            window.open(theURL, '', 'fullscreen=yes, scrollbars=auto');
        }
        // End -->
    </script>
</head>

<body>
    <h1 style="text-align: center;">
        Open In Full Screen
    </h1>
    <div style="text-align: center;"><br>
        <a href="javascript:void(0);" onclick="fullScreen('http://google.com');">
            Open Full Screen Window
        </a>
    </div>
</body>

</html>

Answer 8

Простой пример из: http://www.longtailvideo.com/blog/26517/using-the-browsers-new-html5-fullscreen-capabilities/

<script type="text/javascript">
  function goFullscreen(id) {
    // Get the element that we want to take into fullscreen mode
    var element = document.getElementById(id);

    // These function will not exist in the browsers that don't support fullscreen mode yet, 
    // so we'll have to check to see if they're available before calling them.

    if (element.mozRequestFullScreen) {
      // This is how to go into fullscren mode in Firefox
      // Note the "moz" prefix, which is short for Mozilla.
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
      // This is how to go into fullscreen mode in Chrome and Safari
      // Both of those browsers are based on the Webkit project, hence the same prefix.
      element.webkitRequestFullScreen();
   }
   // Hooray, now we're in fullscreen mode!
  }
</script>

<img class="video_player" src="image.jpg" id="player"></img>
<button onclick="goFullscreen('player'); return false">Click Me To Go Fullscreen! (For real)</button>

Answer 9

Создать функцию

function toggleFullScreen() {

            if ((document.fullScreenElement && document.fullScreenElement !== null) ||
                    (!document.mozFullScreen && !document.webkitIsFullScreen)) {
             $scope.topMenuData.showSmall = true;
                if (document.documentElement.requestFullScreen) {
                    document.documentElement.requestFullScreen();
                } else if (document.documentElement.mozRequestFullScreen) {
                    document.documentElement.mozRequestFullScreen();
                } else if (document.documentElement.webkitRequestFullScreen) {
                    document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
                }
            } else {

                  $scope.topMenuData.showSmall = false;
                if (document.cancelFullScreen) {
                    document.cancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }
            }
        }

В HTML-коде введите как

<ul class="unstyled-list fg-white">

            <li class="place-right" data-ng-if="!topMenuData.showSmall" data-ng-click="toggleFullScreen()">Full Screen</li>
            <li class="place-right" data-ng-if="topMenuData.showSmall" data-ng-click="toggleFullScreen()">Back</li>
        </ul>

Answer 10

Теперь, когда полноэкранные API-интерфейсы стали более распространенными и, кажется, созревают, почему бы не попробовать Screenfull.js ? Я использовал его впервые вчера, и сегодня наше приложение работает по-настоящему полноэкранно во всех браузерах!

Обязательно соедините его с псевдоклассом :fullscreen в CSS. Подробнее см. https://www.sitepoint.com/use-html5-full-screen-api/.