• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создание окно браузера на полный экран (Как сделать окно браузера на полный экран?)
Создание окно браузера на полный экран
Kosten
Дата: Воскресенье, 2019-08-25, 21:24 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25139
Награды: 57


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

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

С подключением библиотеки:

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

HTML

Код
<a id="link" href="#">Нажми меня</a>

JS

Код
$(document).ready(function(){
  $('#link').on('click', function(){
    if(document.documentElement.requestFullScreen) {
    document.documentElement.requestFullScreen();
    } else if(document.documentElement.mozRequestFullScreen) {
    document.documentElement.mozRequestFullScreen();
    } else if(document.documentElement.webkitRequestFullScreen) {
    document.documentElement.webkitRequestFullScreen();
    }
  })
})

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

Демонстрация
Страна: (RU)
Kosten
Дата: Воскресенье, 2019-08-25, 21:32 | Сообщение 2
Оффлайн
Администраторы
Сообщений:25139
Награды: 57


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

Полноэкранный API

HTML

Код
<div id="page-wrapper">

    <h1>Полноэкранный API Демо</h1>

    <section>
  <h2>Полноэкранный документ</h2>
  <button id="fs-doc-button">Перейти на полный экран</button>
  <button id="fs-exit-doc-button">Выход из полноэкранного режима</button>
    </section>

    <hr>

    <section>
  <h2>Полноэкранные видео</h2>
  <video id="video" width="640" height="365" controls>
    <source src="http://demos.mattwest.io/page-visibility-demo/videos/mikethefrog.webm" type="video/webm">
    <source src="http://demos.mattwest.io/page-visibility-demo/videos/mikethefrog.ogv" type="video/ogv">
    <source src="http://demos.mattwest.io/page-visibility-demo/videos/mikethefrog.mp4" type="video/mp4">
    <p>
     Ваш браузер не поддерживает видео HTML5.
      <a href="http://demos.mattwest.io/page-visibility-demo/videos/mikethefrog.mp4">Скачать</a> видео вместо.
    </p>
  </video>
  <button id="fs-vid-button">Перейти на полный экран</button>
    </section>

    <hr>

    <section>
  <h2>Полноэкранные изображения</h2>
  <img id="image" src="https://lh4.googleusercontent.com/-2dRSJbAmbqI/UTNLAOtCFII/AAAAAAAACqw/y3nrKoL06O8/w899-h674-no/100_0456.JPG" alt="Test Image">
  <button id="fs-img-button">Перейти на полный экран</button>
    </section>
</div>

CSS

Код
#page-wrapper {
  width: 640px;
  background: #FFFFFF;
  padding: 1em;
  margin: 1em auto;
  border-top: 5px solid #69c773;
  box-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

h1 {
  margin-top: 0;
}

h2 {
    font-size: 0.9em;
    text-transform: uppercase;
    color: #333;
}

hr {
    margin: 1.5em 0;
    border: 0;
    border-top: 1px solid #CCC;
}

button {
  display: inline-block;
  border-radius: 3px;
  border: none;
  font-size: 0.9rem;
  padding: 0.4rem 0.8em;
  background: #69c773;
  border-bottom: 1px solid #498b50;
  color: white;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  margin: 0.5em 0.25rem 0;
  text-align: center;
}

button:hover, button:focus {
  opacity: 0.75;
  cursor: pointer;
}

button:active {
  opacity: 1;
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset;
}

img {
    max-width: 640px;
}

img:-webkit-full-screen {
    max-width: none;
}

img:-moz-full-screen {
    max-width: none;
}

img:-ms-fullscreen {
  max-width: none;
}

img:full-screen {
    max-width: none;
}

img:fullscreen {
    max-width: none;
}

JS

Код
var requestFullscreen = function (ele) {
    if (ele.requestFullscreen) {
  ele.requestFullscreen();
    } else if (ele.webkitRequestFullscreen) {
  ele.webkitRequestFullscreen();
    } else if (ele.mozRequestFullScreen) {
  ele.mozRequestFullScreen();
    } else if (ele.msRequestFullscreen) {
  ele.msRequestFullscreen();
    } else {
  console.log('Fullscreen API is not supported.');
    }
};

var exitFullscreen = function () {
    if (document.exitFullscreen) {
  document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
  document.msExitFullscreen();
    } else {
  console.log('Fullscreen API is not supported.');
    }
};

var fsDocButton = document.getElementById('fs-doc-button');
var fsExitDocButton = document.getElementById('fs-exit-doc-button');

fsDocButton.addEventListener('click', function(e) {
    e.preventDefault();
    requestFullscreen(document.documentElement);
});

fsExitDocButton.addEventListener('click', function(e) {
    e.preventDefault();
    exitFullscreen();
});

var fsVidButton = document.getElementById('fs-vid-button');
var video = document.getElementById('video');

fsVidButton.addEventListener('click', function(e) {
    e.preventDefault();
    requestFullscreen(video);
});

var fsImgButton = document.getElementById('fs-img-button');
var image = document.getElementById('image');

fsImgButton.addEventListener('click', function(e) {
    e.preventDefault();
    requestFullscreen(image);
});


Демонстрация
Страна: (RU)
First
Дата: Воскресенье, 2019-08-25, 22:53 | Сообщение 3
Оффлайн
Гл. Модератор
Сообщений:816
Награды: 4


А не проще просто нажать F11?
Страна: (NL)
Kosten
Дата: Понедельник, 2019-08-26, 00:19 | Сообщение 4
Оффлайн
Администраторы
Сообщений:25139
Награды: 57


First, это чисто выбор, или на клаве F11 или по клику, хотя закрывать по Esc.
Страна: (RU)
-SAM-
Дата: Вторник, 2019-08-27, 02:50 | Сообщение 5
Оффлайн
Друзья сайта
Сообщений:600
Награды: 25


Цитата First ()
А не проще просто нажать F11?
Так не в этом дело. Без скриптов, то конечно проще сочетанием клавиш делать. Здесь скриптом принудительно делается так (а не пользователь нажимает куда-то, а после вручную делает на весь экран)... то есть через api делается сразу. Может, кому-то нужно какое-то решение написать, что работать будет в полноэкранном режиме (а не просто это переключалка режима отображения); можно сделать и так, что конечный пользователь не будет в курсе о том, что откроется в полный экран.




Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи и ответы на ваши вопросы по системе uCoz.


Сообщение отредактировал
-SAM- - Вторник, 2019-08-27, 03:00
Страна: (UA)
Форум » Web-Раздел » Начинающему вебмастеру » Создание окно браузера на полный экран (Как сделать окно браузера на полный экран?)
  • Страница 1 из 1
  • 1
Поиск: