Закрытие полноэкранного режима для getElementById(id)

Netden

Здравствуйте, я новичок в js, поэтому, пожалуйста, не будьте со мной строги.

Проблема в том, что скрипт переходит в полноэкранный режим, как и ожидалось, но не может понять, как нажать «ESC» или ту же кнопку, чтобы закрыть полноэкранный режим.

.holds-the-iframe просто добавляет загрузчик перед загрузкой iframe.

 function makeFullscreen(id){
 var el = document.getElementById(id);
 el.style = "position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"
 }

HTML:

 <button onclick="makeFullscreen('game');">[ ]</button>

HTML:

 <div class="holds-the-iframe"><iframe id="game" style="width:1000px;height:700px;border:0;" allowfullscreen="true" msallowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" sandbox="allow-same-origin allow-popups allow-scripts allow-pointer-lock allow-orientation-lock allow-popups" src="[URL='https://lumtu.com/yti/bwbbwbS9odHRwczovL3JhbmRvbXVybC5jCby']https://randomurl.com/[/URL]"> </iframe></div>

Код (JavaScript):

Igorek2013

Можете ли вы помочь мне разместить кнопку переключения полноэкранного режима в верхней части экрана, когда iframe работает в полноэкранном режиме? Каким-то образом он отображается в правильном направлении на обычном экране и остается на том же месте в полноэкранном режиме.
https://jsfiddle.net/8qpwvo7y/1/

Jhlyy9

но это слишком сложно для моего понимания. Конечно, это "https://submit.lv/2022/01/25/super-onion-boy/

" это версия, которую вы придумали. Она почти идеальна, но я не могу понять, как запретить iOS Safari прокручивать страницу в полноэкранном режиме. И это "https://submit.lv/2022/01/30/solitaire-13-viena/

" — это версия JS. Могут быть некоторые ошибки wp, но поскольку страница была создана только для целей тестирования...

Kosowar

На самом деле, я думаю, что есть способ реализовать это без JavaScript. Взгляните на следующую страницу:

 <!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="ширина = ширина устройства, начальный масштаб = 1,0">

 <title>title</title>
 <style>
 #iframe-holder{
 display: inline-block;/*always wraps iframe content*/
 position: relative;/*as reference to absolutely positioned label*/
 background-color: red;
 }

 #cb{/*hide traditional checkbox, use label for user interaction*/
 display: none;
 }

 #cb+label{/*label to mimic button*/
 position: absolute;/*relative to iframe holder*/
 right: 1em;
 bottom: 1em;
 display: inline-block;
 width: 1.4em;
 height: 1.2em;
 background-color: lightgray;
 border-radius: 0.3em;
 text-align: center;
 line-height: 1.1em;
 border: 1px solid gray;
 }
 #cb:checked+label{/*is no longer relative to iframe holder*/
 position: fixed;
 z-index: 1;/*pushed forward*/
 }

 #cb+label:before{
 content: '[]';
 }
 #cb:checked+label:before{/*label in 'fullscreen' mode*/
 content: '][';
 }

 #cb~iframe{
 display: block;/*avoid spacing*/
 border: 0;
 }
 #cb:checked~iframe{/*iframe in 'fullscreen' mode*/
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 }
 </style>
 </head>
 <body>
 <h1>h1</h1>

 <p>Autem exercitationem itaque necessitatibus repudiandae dolores. Unde at molestias qui ut velit libero praesentium velit.
 Ea eaque eum dolor alias vel incidunt.</p>

 <div id="iframe-holder">
 <input id="cb" type="checkbox">
 <label for="cb"></label>
 <iframe allowfullscreen="true" msallowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"
 sandbox="allow-same-origin allow-popups allow-scripts allow-pointer-lock allow-orientation-lock allow-popups"
 src="[URL='https://lumtu.com/yti/bwbbwbS9odHRwczovL3JhbmRvbXVybC5jCby']https://randomurl.com/[/URL]"></iframe>
 </div>

 <p>Fuga quisquam ea doloremque asperiores expedita. Quam provident sint id. Officia ea aut dignissimos qui sint.
 Voluptas et aut quia dolores illum.</p>
 </body>
</html>

HTML:

XaXaTyXa

Привет, WeFF, Я предполагаю, что это не «настоящий полноэкранный режим», и это причина, по которой исходная последовательность клавиш Escape недоступна. Ссылка: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

Похожие темы	Дата
[Ян Коваленко] Полный курс по JavaScript - с нуля до результата	19.12.2024, 05:12
Программирование на JavaScript для Adobe After Effects - Sova1127 (2017)	19.12.2024, 05:12
Angular И Typescript. Сайтостроение Для Профессионалов - Файн Я., Моисеев А.	19.12.2024, 05:12
найти div после ссылки с помощью JQuery	19.12.2024, 05:12
Изменить порядок массива объектов	19.12.2024, 05:12
Сопоставление элемента с содержимым, если не найдено, добавить его.	19.12.2024, 05:12
Выражение регулярного выражения JS	19.12.2024, 05:12
Добавление события клика для выбора опции	19.12.2024, 05:12
[Loftschool] Курс по AngularJS [2015.06]	19.12.2024, 05:12
Пoнятный JavaScript 2.0 - Калюжный	19.12.2024, 05:12

Закрытие полноэкранного режима для getElementById(id)

Netden

Igorek2013

Jhlyy9

Kosowar

XaXaTyXa

I AM

Интересно