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

XIII · 13.05.24

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

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

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

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

Код:

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://wmlogs.com/yti/bwbbwbS9odHRwczovL3JhbmRvbXVybC5jCby']https://randomurl.com/[/URL]"> </iframe></div>

Код (JavaScript):

igorek2013 · 20.05.24

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

shmakovka · 03.06.24

но это слишком сложно для моего понимания.

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

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

kosowar · Пятница в 10:48

На самом деле, я думаю, что есть способ реализовать это без 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; position: relative; background-color: red; } #cb{ display: none; } #cb+label{ position: absolute; 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{ position: fixed; z-index: 1; } #cb+label:before{ content: '[]'; } #cb:checked+label:before{ content: ']['; } #cb~iframe{ display: block; border: 0; } #cb:checked~iframe{ 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://wmlogs.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:

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

XIII

igorek2013

shmakovka

kosowar

Поделиться страницей

О нашем форуме!

Новые пользователи

Что нового?