Как сделать чтобы когда нажимаешь 1-й раз то full screan открывался,а когда 2-й раз то закрывался?

Question

PanCar @PanCar

Как сделать чтобы когда нажимаешь 1-й раз то full screan открывался,а когда 2-й раз то закрывался?

Здравствуйте,как сделать чтобы когда нажимаешь 1-й раз то full screan открывался,а когда 2-й раз то закрывался?Та же функция на видеопрогрователях в онлайн кинотеатрах.
Скрипт открытия и закрытия есть,вот если надо

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<button id="sum"><img width="20" height="20" src="Без названия.png" alt=""></button>
<button id="sub" >Стандартный экран</button>
<script>
	document.querySelector('#sum').addEventListener('click', function(){
        if(document.documentElement.webkitRequestFullscreen) {
                document.documentElement.webkitRequestFullscreen();
        }
        else{
            document.documentElement.mozRequestFullScreen();
        }
});
document.querySelector('#sub').addEventListener('click', function(){
    if(document.documentElement.webkitRequestFullscreen) {
        document.webkitCancelFullScreen()
   }
    else{
        document.mozCancelFullScreen();
    }
});
    </script>
</body>
</html>

Вопрос задан более трёх лет назад
76 просмотров

2 комментария

Подписаться 1 Простой 2 комментария

Решения вопроса 1

3 комментария

dintear_koden @dintear_koden

Вариант с совместимостью браузеров:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="sum"><img width="20" height="20" src="Без названия.png" alt=""></button>
  <script>
    let sum = document.querySelector('#sum');

    sum.addEventListener('click', function(){
      if (document.fullscreenElement) {
        if (document.documentElement.webkitRequestFullscreen) {
        	document.webkitCancelFullScreen();
        }
        else {
	        document.mozCancelFullScreen();
	    }
      }
      else {
        if (document.documentElement.webkitRequestFullscreen) {
        	document.documentElement.webkitRequestFullscreen();
        }
        else {
        	document.documentElement.mozRequestFullScreen();
        }
      }
    });
  </script>
</body>
</html>

Написано более трёх лет назад

dintear_koden @dintear_koden

Можно даже так:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="sum"><img width="20" height="20" src="Без названия.png" alt=""></button>
  <script>
    let sum = document.querySelector('#sum');

    sum.addEventListener('click', function(){
    	// открытие
    	if (document.documentElement.webkitRequestFullscreen) {
        	document.documentElement.webkitRequestFullscreen();
        } else {
        	document.documentElement.mozRequestFullScreen();
        }

        // закрытие
        if (document.documentElement.webkitRequestFullscreen) {
        	document.webkitCancelFullScreen();
        } else {
	        document.mozCancelFullScreen();
	    }
    });
  </script>
</body>
</html>

Написано более трёх лет назад

dintear_koden @dintear_koden

Ну и последний вариант:

<script>
    let sum = document.querySelector('#sum');

    sum.addEventListener('click', function(){
    	// открытие и закрытие
    	if (document.documentElement.webkitRequestFullscreen) {
        	document.documentElement.webkitRequestFullscreen();
        	document.webkitCancelFullScreen();
        } else {
        	document.documentElement.mozRequestFullScreen();
        	document.mozCancelFullScreen();
        }
    });
  </script>

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

Веб-разработка

+1 ещё

Средний
Как сделать символическую ссылку на другой сайт(папку) Fastpanel?
- 1 подписчик
- 7 часов назад
- 24 просмотра
0

ответов
JavaScript

Простой
Как посчитать количество пересечений с помощью метода filter?
- 1 подписчик
- 7 часов назад
- 128 просмотров
3

ответа
JavaScript

Простой
Как реализовать логику назад вперед?
- 1 подписчик
- 10 часов назад
- 81 просмотр
0

ответов
Веб-разработка

+2 ещё

Средний
Почему не подтягиваются изменения стилей для https?
- 1 подписчик
- 17 часов назад
- 77 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как подключить вконтакте на сайт чтобы слать юзеру в вк уведомления или сообщения?
- нет подписчиков
- вчера
- 134 просмотра
1

ответ
JavaScript

+1 ещё

Сложный
Fastify долгая загрузка что можно сделать как найти причину?
- 1 подписчик
- вчера
- 52 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 24 нояб.
- 194 просмотра
2

ответа
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- 23 нояб.
- 109 просмотров
1

ответ
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- 23 нояб.
- 728 просмотров
1

ответ
PHP

+3 ещё

Простой
Firefox больше не отправляет в HTTP_ACCEPT image/webp?
- 3 подписчика
- 22 нояб.
- 639 просмотров
2

ответа
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Текст из фотографии в отдельный файл

26 нояб. 2024, в 04:41

1500 руб./за проект

Выложить 75 курсов на геткурс и настроить базовые функции

26 нояб. 2024, в 02:18

15000 руб./за проект

Редизайн и доработка интернет магазина на wordPress

25 нояб. 2024, в 23:42

50000 руб./за проект

имеете ввиду вместо двух разных кнопок сделать одну?
dintear_koden, Да,но по функционал один и тот же

Answer 1 · 2021-01-08 16:36:03

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<button id="sum"><img width="20" height="20" src="Без названия.png" alt=""></button>
	<script>
		let sum = document.querySelector('#sum');

		sum.addEventListener('click', function(){
			if (document.fullscreenElement) {
				document.exitFullscreen();
			}
			else {
				document.documentElement.requestFullscreen();
			}
		});
	</script>
</body>
</html>

Как сделать чтобы когда нажимаешь 1-й раз то full screan открывался,а когда 2-й раз то закрывался?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт