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

XIII

Здравствуйте, я новичок в 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/

shmakovka

но это слишком сложно для моего понимания. Конечно, это "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

Похожие темы	Дата
[frontendmasters.com, Will Sentance] JavaScript: The Hard Parts, v2 (ENG) (2020)	19.10.2024, 18:10
[центр Мастеров] Javascript И Jquery. Расширенный Курс	19.10.2024, 18:10
Lynda.com - Практика И Эффективность Javascript (2009)	19.10.2024, 18:10
Курс По Angular.js - Кантор (2016)	19.10.2024, 18:10
Delphi JavaScript execution - ditch TWebBrowser for ChakraCore by Darian Miller	19.10.2024, 18:10
Консоль разработчика Chrome. Сравните цены на двух сайтах.	19.10.2024, 18:10
Помогите мне с этой веб-страницей иерархии генеалогического древа.	19.10.2024, 18:10
Проблема с картой Javascript	19.10.2024, 18:10
Выбор времени и загрузка темы jquery blitzer 4	19.10.2024, 18:10
Сохранить состояние вкладки – HTML5 localStorage	19.10.2024, 18:10

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

XIII

igorek2013

shmakovka

kosowar

XaXaTyXa

I AM

Интересно