Установите окно в полноэкранный режим (НАСТОЯЩИЙ полноэкранный; функциональность F11) с помощью JavaScript - PullRequest
Новая
       31

Установите окно в полноэкранный режим (НАСТОЯЩИЙ полноэкранный; функциональность F11) с помощью JavaScript

24 голосов
/ 24 августа 2011

Есть несколько вопросов по этому поводу, некоторые говорят, что это невозможно, некоторые говорят, что это возможно в IE, например полноэкранный режим Internet Explorer? и мне интересно универсальноеРешение и ответ для этого.

Я создаю веб-страницу фотогалереи, и галерея действительно различает при просмотре в полноэкранном режиме (как следует из названия, я говорю о true полноэкранный, не с полосами и окном Chrome и т. д.), и я хотел бы разместить кнопку для полноэкранного режима.(нет, я не буду использовать принудительную ФС без намерения пользователя, я тоже ненавижу такую ​​«функциональность»). Это возможно во Flash, когда инициируется через действие, инициированное пользователем, такое как нажатие кнопки, и мне было интересно, если такойвещь доступна для Javascript тоже.По логике вещей, он должен иметь механизм, аналогичный Flash / SL, запускаемый пользователем в полноэкранном режиме.Если нет «универсальной» функциональности, которая будет работать для всех, я в порядке (лучше, чем ничего) для частичной функциональности (я имею в виду , поддерживающую НЕКОТОРЫЕ из браузеров , НЕ , устанавливающую ширину окна /высота и т. д. не приходят с ответом на вопрос об установке ширины / высоты окна, я знаю, как это сделать, я НЕ ищу) тоже.

Ответы [ 6 ]

35 голосов
/ 11 августа 2014

Теперь это возможно в последних версиях Chrome, Firefox и IE (11).

Следуя указаниям Зуула на эту тему , я отредактировал его код, включив IE11 ивозможность полноэкранного отображения любого элемента на странице.

JS: 

function toggleFullScreen(elem) {
    // ## The below if statement seems to work better ## if ((document.fullScreenElement && document.fullScreenElement !== null) || (document.msfullscreenElement && document.msfullscreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
        if (elem.requestFullScreen) {
            elem.requestFullScreen();
        } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullScreen) {
            elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
        }
    } else {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}

HTML: 

<input type="button" value="click to toggle fullscreen" onclick="toggleFullScreen(document.body)">

Где «document.body» - любой элементВы так желаете.

Также обратите внимание, что попытки запустить эти полноэкранные команды из консоли не работают в Chrome или IE.У меня был успех с Firebug в Firefox.

Еще одна вещь, на которую следует обратить внимание, это то, что эти «полноэкранные» команды не имеют вертикальной полосы прокрутки, вам нужно указать это в CSS: 

*:fullscreen
*:-ms-fullscreen,
*:-webkit-full-screen,
*:-moz-full-screen {
   overflow: auto !important;
}

Похоже, что для! IE необходимо "! Важный", чтобы отобразить его

Вот пример того, как он работает .

8 голосов
/ 24 августа 2011

Нет. В старых версиях IE (& le; 6) это разрешено, но эта функциональность рассматривается как проблема безопасности, поэтому ни один современный браузер не позволяет этого.

Вы по-прежнему можете звонить window.open(url,'','fullscreen=yes'), что дает вам 90% пути, но дает несколько иные результаты:

  • IE открывает окно только с заголовком и строкой URL. Размер окна заполняет весь экран, и охватывает панель задач Windows .
  • Mozilla также открывает окно только с заголовком и строкой URL. Однако новое окно наследует размеры открывающегося окна. Если открываемое окно развернуто, новое окно открывается максимально. (Панель задач не закрыта.)
  • Chrome также открывает окно только с заголовком и строкой URL. Новое окно наследует размеры открывающегося окна, но оно никогда не открывается, развернуто (даже если открытое окно развернуто).

Это так же близко, как вы получите с JavaScript. Другой вариант - создать что-то во Flash (тьфу!) или просто использовать кнопку "полный экран" откройте лайтбокс с надписью «Нажмите F11, чтобы перейти в полноэкранный режим», и скройте лайтбокс на window.resize или нажмите кнопку отмены в лайтбоксе.

Редактировать: Правильный полноэкранный API (сначала , предложенный Mozilla , а затем выпущенный как W3C ), был реализован Webkit (Safari 5.1+ / Chrome 15+) и Firefox (10+). Краткая история и примеры использования здесь. Обратите внимание, что IE10 предположительно не будет поддерживать API.

3 голосов
/ 18 июля 2018

Интересно, почему никто не заметил, что все ответы неверны.

Установка элемента body в полноэкранный режим не ведет себя так же, как нажатие клавиши F11.

Такое же поведение F11 может быть получено с помощью: 

document.documentElement.webkitRequestFullScreen();   // on

и 

document.webkitCancelFullScreen();  // off

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

isFullScreen=()=>!(document.webkitCurrentFullScreenElement==null)

Примечание: это необходимо вызывать из события взаимодействия с пользователем (onclick, onkeydown и т. Д.).

1 голос
/ 24 августа 2011

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

0 голосов
/ 21 февраля 2018

Есть неизвестная библиотека, которая делает всю работу за вас:

https://github.com/rafrex/fscreen

У меня была такая же проблема, и у меня возникла (например, в компоненте реакции): 

import fscreen from 'fscreen';
.....

if (fscreen.fullscreenElement == null) {
  fscreen.requestFullscreen(document.documentElement);
}else{
  fscreen.exitFullscreen();
}

Работает в Chrome, Firefox, Safari, IE11, iOS, Android

0 голосов
/ 24 августа 2011

Полноэкранная поддержка через java-скрипт не реализована для Chrome или Firefox.Однако вы можете получить его для MSIE.Но это также не функциональность F11.

Даже chrome.exe -kiosk не открывает страницу в полноэкранном режиме.

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

...