Нажмите на полный экран

Question

Нажмите на полный экран

Я создаю веб-приложение для будущего интернет-магазина Chrome. Есть ли способ смоделировать нажатие F11? Или просто команда, которая сделает текущее окно полноэкранным?

62

javascript html

Источник

user385815 10 окт '10 в 14:30

8 ответов

Решение

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

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

Переключить состояние полноэкранного режима при нажатии кнопки

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

HTML-элемент, действующий как триггер:

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

JavaScript:

function toggleFullScreen() {
  if ((document.fullScreenElement && document.fullScreenElement !== null) ||    
   (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    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 {  
    if (document.cancelFullScreen) {  
      document.cancelFullScreen();  
    } else if (document.mozCancelFullScreen) {  
      document.mozCancelFullScreen();  
    } else if (document.webkitCancelFullScreen) {  
      document.webkitCancelFullScreen();  
    }  
  }  
}

Перейти в полноэкранный режим по нажатию кнопки

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

HTML-элемент, действующий как триггер:

<input type="button" value="click to go fullscreen" onclick="requestFullScreen()">

JavaScript:

function requestFullScreen() {

  var el = document.body;

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

Источники найдены вместе с полезной информацией по этому вопросу:

Сеть разработчиков Mozilla

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

Как сделать браузер полноэкранным с помощью ключевого события F11 через JavaScript

Chrome Fullscreen API

полноэкранный плагин событий jQuery, версия 0.2.0

JQuery-полноэкранный-плагин

145

Источник

user352449 16 май '12 в 21:44

Краткая личная версия букмарклета

javascript: document.body.webkitRequestFullScreen();

перейти на полный экран ← Вы можете перетащить эту ссылку на панель закладок, чтобы создать букмарклет, но впоследствии вам нужно отредактировать его URL: Удалите все до javascript, включая одну косую черту: http://delete_me/javascript: [...]

Это работает для меня в Google Chrome. Вы должны проверить, работает ли он в вашей среде, и иначе использовать другую формулировку вызова функции, например, javascript:document.body.requestFullScreen(); - посмотреть другие ответы на возможные варианты.

_{На основе ответов @Zuul и @default - спасибо!}

7

Источник

user234309 26 сен '17 в 17:48

Если вы хотите переключить всю вкладку в полноэкранный режим (как при нажатии клавиши F11) document.documentElement это элемент, который вы ищете:

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

5

Источник

user5796329 08 фев '17 в 15:38

Я попробовал другие ответы на этот вопрос, и есть ошибки с различными API-интерфейсами браузера, особенно Fullscreen против FullScreen, Вот мой код, который работает с основными браузерами (по состоянию на 1 квартал 2019 года) и должен продолжать работать, когда они стандартизируются.

function fullScreenTgl() {
    let doc=document,elm=doc.documentElement;
    if      (elm.requestFullscreen      ) { (!doc.fullscreenElement   ? elm.requestFullscreen()       : doc.exitFullscreen()        ) }
    else if (elm.mozRequestFullScreen   ) { (!doc.mozFullScreen       ? elm.mozRequestFullScreen()    : doc.mozCancelFullScreen()   ) }
    else if (elm.msRequestFullscreen    ) { (!doc.msFullscreenElement ? elm.msRequestFullscreen()     : doc.msExitFullscreen()      ) }
    else if (elm.webkitRequestFullscreen) { (!doc.webkitIsFullscreen  ? elm.webkitRequestFullscreen() : doc.webkitCancelFullscreen()) }
    else                                  { console.log("Fullscreen support not detected.");                                          }
    }

2

Источник

user8946 26 фев '19 в 23:44

Вот несколько способов сделать это:

Я бы посоветовал предоставить всплывающее окно, спрашивающее пользователя, хочет ли он / она перейти на полный экран, а затем соответственно вызвать этот javascript.

1

Источник

user82449 10 окт '10 в 14:39

var elem = document.getElementById("myvideo");
function openFullscreen() {
  if (elem.requestFullscreen) {
      elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
      elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
      elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
      elem.msRequestFullscreen();
  }
}
//Internet Explorer 10 and earlier does not support the msRequestFullscreen() method.

0

Источник

user10007052 14 янв '19 в 14:49

//set height of html
$("html").css("height", screen.height);
//set width of html
$("html").css("width", screen.width);
//go to full screen mode
document.documentElement.webkitRequestFullscreen();

0

Источник

user10084733 15 июл '18 в 17:07

Так просто попробуйте это

<div dir="ltr" style="text-align: left;" trbidi="on">
<!-- begin snippet: js hide: false console: true babel: null -->

-1

Источник

user11655262 27 фев '20 в 15:47

Другие вопросы по тегам javascript html

user31671 10 окт '10 в 14:32 2010-10-10 14:32 · Accepted Answer · 2010-10-10 14:32

Это возможно с JavaScript.

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

57

Источник

user31671 10 окт '10 в 14:32