Включение полноэкранного режима

Небольшой код на JavaScript для входа и выхода из полноэкранного режима окна браузера

Пример:

HTML:

<button id="fullscr"></button>

1	<button id="fullscr"></button>

JS:

let fullscreen;
let fsEnter = document.getElementById('fullscr');
let fsEnterIn = "Войти в полноэкранный режим";
let fsEnterOut = "Выйти из полноэкранного режима";
fsEnter.innerHTML = fsEnterIn;
fsEnter.addEventListener('click', function (e) {
    e.preventDefault();
    if (!fullscreen) {
        fullscreen = true;
        document.documentElement.requestFullscreen();
        fsEnter.innerHTML = fsEnterOut;
		} else {
        fullscreen = false;
        document.exitFullscreen();
        fsEnter.innerHTML = fsEnterIn;
	}
});
document.addEventListener("fullscreenchange", function() { 
	if((window.fullScreen) || (window.innerWidth == screen.width && window.innerHeight == screen.height)) {
		fullscreen = true;
		fsEnter.innerHTML = fsEnterOut;
		} else {
		fullscreen = false;
		fsEnter.innerHTML = fsEnterIn;
	}
});

let fullscreen;

let fsEnter = document.getElementById('fullscr');

let fsEnterIn = "Войти в полноэкранный режим";

let fsEnterOut = "Выйти из полноэкранного режима";

fsEnter.innerHTML = fsEnterIn;

fsEnter.addEventListener('click', function (e) {

e.preventDefault();

if (!fullscreen) {

fullscreen = true;

document.documentElement.requestFullscreen();

fsEnter.innerHTML = fsEnterOut;

} else {

fullscreen = false;

document.exitFullscreen();

fsEnter.innerHTML = fsEnterIn;

}

});

document.addEventListener("fullscreenchange", function() {

if((window.fullScreen) || (window.innerWidth == screen.width && window.innerHeight == screen.height)) {

fullscreen = true;

fsEnter.innerHTML = fsEnterOut;

} else {

fullscreen = false;

fsEnter.innerHTML = fsEnterIn;

}

});

Оформление самой кнопки я приводить не стал, так как она должна вписываться непосредственно в дизайн сайта и скорее всего показываться иконкой, а не текстом.

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на мобильном Сгенерировать QR-код для перехода на эту страницу с телефона

Опубликовано: 02.02.2021 / Обновлено: 30.06.2022
Рубрики: Весь сайт - простые решения
Метки: JavaScript
5697 просмотров

Обсуждение вариантов, как можно выделить тот или иной контент для привлечения внимания посетителя

Добавить комментарий:

Ваш комментарий отправлен!

Влад: 01.08.2022 в 00:12

А почему внутри сайта, при переходе по ссылке полноэкранный режим отключается?

Ответить
- Alexander: 02.08.2022 в 23:19
  
  А скрипт на всех страницах сайта ?
  Если да, то ссылку надо, иначе не пойму в чем проблема
  
  Ответить
Игорь Б: 30.06.2022 в 08:18

Делал для своих проектов функцию перехода в полный экран и обратно. Как у меня, так и здесь есть недостаток: если нажать на кнопку "Войти в полноэкранный режим", а потом выйти из него не по кнопке, а нажав на всплывающий сверху крестик или нажав на клавишу Escape, то надпись "Выйти иэ полноэкранного режима" так и останется. (У меня это были соответствующие иконки.) Есть ли решения по устранению этого недостатка? В одном скрипте (с закрытым кодом) видел, что решение есть. Пытался найти самостоятельно или искать решение в Интернете - ничего мои поиски не дали.

Ответить
- Игорь Б: 30.06.2022 в 08:28
  
  Дополню. То же, если выйти из полноэкранного режима при поможи контекстного меню на правой клавиши мыши.
  
  Ответить
- Alexander: 30.06.2022 в 09:21
  
  Поправил JS, проверьте.
  
  Ответить
  - Игорь Б: 01.07.2022 в 09:32
    
    Спасибо!
    
    Ответить
Илья Александров: 25.05.2021 в 16:24

Возможно ли доработать инструмент для мобильных устройств?
Если да, будет ли это добавлено?
Будет ли работать с фреймами?

Ответить
- Alexander: 26.05.2021 в 09:40
  
  Он работает на мобильном.
  С фреймами тоже должно, это JS функция requestFullscreen
  Можете поискать про нее информацию.
  
  Ответить

Пример:

HTML:

JS:

Смотрите также:

Добавить комментарий:

Комментарии: