сделать элемент полноэкранного на веб-странице - PullRequest
Новая
       0

сделать элемент полноэкранного на веб-странице

3 голосов
/ 04 марта 2011

Любая идея сделать элемент на странице в полноэкранном режиме?

Например, div или img?

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

Есть идеи? 

  div.fullscreen{
    display:block;

    /*set the div in the top-left corner of the screen*/
    position:absolute;
    top:0;
    left:0;

    /*set the width and height to 100% of the screen*/
    width:100%;
    height:100%;
    background-color:red
  }

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

Ответы [ 3 ]

4 голосов
/ 04 марта 2011

HTML-элементы не могут выходить за границы окна документа браузера. Меню и панель инструментов находятся за пределами окна документа (которое является дочерним элементом окна браузера), поэтому вы не можете «достучаться» до них.

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

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

2 голосов
/ 15 июля 2013

Существует относительно новый полноэкранный API JavaScript , который может сделать элемент полноэкранным.

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

Код из статьи МДН: 
document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
    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();
    }
  }
}
0 голосов
/ 04 марта 2011

Сейчас это невозможно, и, вероятно, никогда не будет.

Только представьте, что произойдет, если каждый веб-сайт, который вы посещаете, имеет свободный доступ к вашему рабочему столу.

...