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

253

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

user63898
источник
29
его внутреннее применение, а не для общественности. я не собираюсь оскорблять кого-либо
user63898
2
Вы могли бы, прагматично, спросить пользователя:sprintf('Dear user, the best experience with this site is in fullscreen mode. To view this site full screen, press %s.', _get_browsers_full_Screen_key())
Boldewyn
6
Мне интересно, как работает полноэкранный режим YouTube. Кто-нибудь знает ответ?
Кастури
6
это делает флэш-плеер, а не браузер
user63898 30.09.10
5
Для состояния обзорного искусства смотрите здесь: hacks.mozilla.org/2012/01/...
loomi

Ответы:

54

Это как можно ближе к полноэкранному режиму в 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> 
Сол Долгин
источник
Посмотрите на ссылку / принятый ответ в ссылке, которую написал Хаим Евги ... Вы не должны изменять размер браузера. Однако вы можете развернуть окно браузера (так, как я его прочитал)
lexu
4
Зависит от ваших настроек разрешения JavaScript в настройках. Вы можете переключать JS контроль над функциями окна.
борозда
3
Это произошло в прошлый раз, когда сайт использовал такой код, и я не блокировал его: dorward.me.uk/tmp/fullscreen.jpeg
Квентин,
2
Взгляните на полноэкранный API webkit: bleeding-edge-tlv.appspot.com/#28 (из # gdd2011)
Кристиан Кютбах,
17
ЭТО СТАРЫЙ. СМОТРИТЕ НИЖЕ ДЛЯ РЕШЕНИЯ!
Кивон
281

В новых браузерах, таких как 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

башня
источник
3
В настоящее время доступно в Chrome 15, Firefox 10 и Safari 5.1. См. Этот пост в блоге hacks.mozilla.org для получения подробной информации о текущем состоянии игры.
Симон Лишке
10
Фантастика, есть ли способ выйти из полноэкранного режима?
Кристофер Чейз
2
Несколько вещей. В IE это, очевидно, будет игнорировать элемент и весь экран. Если вы хотите, чтобы на весь экран все проходило document.documentElement, то вы получите правильный корневой элемент («html» или «body»). И использовать можно использовать, cancelFullscreen()чтобы закрыть его (или снова отправить «F11» для IE).
Мэтью Уилкоксон
6
Он может быть активирован только пользователем (например, с помощью полноэкранной кнопки). Автоматический полноэкранный режим при загрузке невозможен.
А.К.Р.
3
орфографическая ошибка для IE должна быть msRequestFullScreen, как в документах msdn.microsoft.com/en-us/library/ie/dn265028(v=vs.85).aspx
DanielB
66

Этот код также включает в себя, как включить полноэкранный режим для 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}");
  }
}

Источники:

Питер О.
источник
Работает на IE 8 выше, FF10 выше (пробовал в FF 9, не работает), тестировал на Chrome 18
Treby
@Peter O. «должен быть помещен в обработчик событий», каким-либо образом вызвать его загрузку?
Фрэнсис П
@FrancisP: Нет; ни «загрузка», ни «DOMContentLoaded» не являются применимыми UIEvent или MouseEvent для полноэкранного API.
Питер О.
2
Спасибо за "(обратите внимание, однако, что requestFullScreen" работает только во время "" [m] oEST UIEvents и MouseEvents, таких как нажатие и нажатие клавиши и т. Д. "," Поэтому его нельзя использовать злонамеренно ".)"
Да documentElement, лучше, чем bodyдля меня.
Мэтт
24

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

        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;
        }
Майк Нельсон
источник
1
Как насчет msIsFullScreen?
Кангакс
1
Спецификация изменилась. webkitCancelFullScreenв настоящее время webkitExitFullscreen. genecontent.org/post/70347573294/…
Дуг С
первая часть этой document.fullScreenElement && document.fullScreenElement !== null
логики
изменить elemв toggleFull()от document.bodyк , document.documentElementчтобы исправить левый и правый вопрос Маржа
Фирнас
11

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

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

Себастьян Гикель
источник
8

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

Dhiraj
источник
1
@Ian Это работает в IE edge. Старая версия IE не поддерживает это.
Dhiraj
8

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

<!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>
Джерри Резерфорд
источник
window.open (theURL, '', 'fullscreen = yes', 'scrollbars = auto'); На этой линии есть проблема с паренсом
Кевин Бауэрсокс
Это от родителей, хотя. Бесполезно, когда окно уже открыто.
Кристиан,
7

Простой пример: 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>
Иаков
источник
6

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

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>
Диксит
источник
Кажется, что оператор if не обнаруживает это в полноэкранном режиме в IE 11 (поэтому не закрывается).
Ян
3

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

Обязательно соедините его с :fullscreenпсевдоклассом в CSS. См. Https://www.sitepoint.com/use-html5-full-screen-api/ для получения дополнительной информации.

simonhamp
источник
Удивительный маленький сценарий. Используя его на моем сайте сейчас на www.StarCommanderOnline.com. Спасибо!
Энди
3

К счастью для ничего не подозревающих веб-пользователей, это невозможно сделать только с помощью javascript. Вам нужно будет написать специальные плагины для браузера, если они еще не существуют, а затем каким-то образом заставить людей загрузить их. Самое близкое, что вы можете получить - это развернутое окно без инструментов или панелей навигации, но пользователи все равно смогут видеть URL.

window.open('http://www.web-page.com', 'title' , 'type=fullWindow, fullscreen, scrollbars=yes');">

Это, как правило, считается плохой практикой, поскольку удаляет большую часть функциональности браузера от пользователя.

какашка
источник
3

Попробуйте screenfull.js . Это хорошее кросс-браузерное решение, которое должно работать и для браузера Opera.

Простая оболочка для кросс-браузерного использования полноэкранного API JavaScript, которая позволяет вам выводить страницу или любой элемент в полноэкранный режим. Сглаживает различия в реализации браузера, так что вам не нужно это делать.

Demo .

Хасан Ахмед
источник
2

Это может поддержать

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="PRODUCTION_Default5" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
        <script type="text/javascript">
            function max()
            {
               window.open("", "_self", "fullscreen=yes, scrollbars=auto"); 
            }
        </script>
    </head>
    <body onload="max()">
        <form id="form1" runat="server">
        <div>
        This is Test Page
        </div>
        </form>
    </body>
    </html>
Сринивазан
источник
2

Ты можешь попробовать:

<script type="text/javascript">
    function go_full_screen(){
      var elem = document.documentElement;
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
      } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
      }
    }
</script>

<a href="#" onClick="go_full_screen();">Full Screen / Compress Screen</a>

Сантос Л. Виктор
источник
Кажется, мне не удалось в Chrome 76 на Ubuntu
Джонатан
1

Попробуйте этот скрипт

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

Для вызова из скрипта используйте этот код,

window.fullScreen('fullscreen.jsp');

или с гиперссылкой используйте это

<a href="javascript:void(0);" onclick="fullScreen('fullscreen.jsp');"> 
Open in Full Screen Window</a>
Зарин Дж. С.
источник
1

В Firefox 10 вы можете сделать текущую страницу полноэкранной (настоящей полноэкранной без оконного хрома), используя этот javascript:

window.fullScreen = true;
Leopd
источник
1
Термин «должен» перегружен программным обеспечением. В некоторых браузерах это только для чтения. Firefox 10 позволяет вам установить его.
Леопд
1

Это будет работать, чтобы показать ваше окно на весь экран

Примечание: чтобы это работало, вам нужен Query from http://code.jquery.com/jquery-2.1.1.min.js

Или сделайте, чтобы иметь ссылку на JavaScript, как это.

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

   <div id="demo-element">
        <span>Full Screen Mode Disabled</span>
        <button id="go-button">Enable Full Screen</button>
    </div>
    <script>
    function GoInFullscreen(element) {
        if(element.requestFullscreen)
            element.requestFullscreen();
        else if(element.mozRequestFullScreen)
            element.mozRequestFullScreen();
        else if(element.webkitRequestFullscreen)
            element.webkitRequestFullscreen();
        else if(element.msRequestFullscreen)
            element.msRequestFullscreen();
    }

    function GoOutFullscreen() {
        if(document.exitFullscreen)
            document.exitFullscreen();
        else if(document.mozCancelFullScreen)
            document.mozCancelFullScreen();
        else if(document.webkitExitFullscreen)
            document.webkitExitFullscreen();
        else if(document.msExitFullscreen)
            document.msExitFullscreen();
    }

    function IsFullScreenCurrently() {
        var full_screen_element = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;

        if(full_screen_element === null)
            return false;
        else
            return true;
    }

    $("#go-button").on('click', function() {
        if(IsFullScreenCurrently())
            GoOutFullscreen();
        else
            GoInFullscreen($("#demo-element").get(0));
    });

    $(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() {
        if(IsFullScreenCurrently()) {
            $("#demo-element span").text('Full Screen Mode Enabled');
            $("#go-button").text('Disable Full Screen');
        }
        else {
            $("#demo-element span").text('Full Screen Mode Disabled');
            $("#go-button").text('Enable Full Screen');
        }
    });</script>
SeekLoad
источник
0

Если вы находитесь в ситуации с «киоском», способ перехода к полноэкранному режиму - это ввести F11 в окно браузера после его запуска и запуска. Это не очень приятный запуск, и пользователь мог бы нажать на сенсорный экран сверху и получить полу-полноэкранный вид, но подача F11 могла бы быть в крайнем случае или просто начать работу над проектом.

Алекс Робинсон
источник
0

Вот мое полное решение Full Screenи Exit Full Screenоба (многие благодаря помощи от ответа башни выше):

$(document).ready(function(){
$.is_fs = false;
$.requestFullScreen = function(calr)
{
    var element = document.body;

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

    $.is_fs = true;    
    $(calr).val('Exit Full Screen');
}

$.cancel_fs = function(calr)
{
    var element = document; //and NOT document.body!!
    var requestMethod = element.exitFullScreen || element.mozCancelFullScreen || element.webkitExitFullScreen || element.mozExitFullScreen || element.msExitFullScreen || element.webkitCancelFullScreen;

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

    $(calr).val('Full Screen');    
    $.is_fs = false;
}

$.toggleFS = function(calr)
{    
    $.is_fs == true? $.cancel_fs(calr):$.requestFullScreen(calr);
}

});

// ВЫЗОВ:

<input type="button" value="Full Screen" onclick="$.toggleFS(this);" />
Рахил Хасан
источник