Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   FullScreen не срабатывает (https://javascript.ru/forum/events/82102-fullscreen-ne-srabatyvaet.html)

Vahan60 12.03.2021 12:22
FullScreen не срабатывает
 
Доброго времени суток.

Пишу приложение для Хром. Стартовая страница "Меню". Её задача - сориентировать пользователя какую страницу открыть второй по клику на "Вutton". А вот на этой (второй) странице есть кнопка "FullScreen", по клику переводящий страницу в полноэкранный режим.

Так вот: я хочу сделать так, чтобы по клику на "Вutton" вторая страница открывалась сразу в полноэкранном режиме.

Для этого написал так:

Код:
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
        <link rel="stylesheet" href="styleSt.css"  />
  </head>
  <body>
        <div class = "menu">
                  <button class = "page"><h1>страница1</h1></button>
          <button class = "page"><h1>страница2</h1></button>
          <button class = "page"><h1>страница3</h1></button>
          <button class = "page"><h1>страница4</h1></button>
    </div>
   
    <script>
      let bd = document.querySelector ("body");
      let page = document.querySelectorAll(".lang");
          for (let j = 0; j < 4; j++){
      page[j].addEventListener ("click", function() {         
              document.location.href = "index2.html";
          bd.requestFullscreen();
          let target = event.target;
          target.style.display = "none";
          })
      };         
    </script>
  </body>
</html>
Код работает наполовину. Новая страница открывается, но не в полноэкранном режиме.
В чём дело, где я ошибаюсь?

рони 12.03.2021 12:32
Vahan60,
вторая строка скрипта.
if(document.location.href == "index2.html") bd.requestFullscreen();

Vahan60 12.03.2021 13:05
Переписал.
Получилось следующее:
Код:
<script>
   
      let bd = document.querySelector ("body");
      let page = document.querySelectorAll(".lang");
          for (let j = 0; j < 4; j++){
      page[j].addEventListener ("click", function() {         
          if(document.location.href == "index2.html") bd.requestFullscreen();
          bd.requestFullscreen();
          let target = event.target;
          target.style.display = "none";
          })
      };         
   
    </script>
Открывает в полноэкранном режиме, но не переходит на вторую страницу.

рони 12.03.2021 13:36
Vahan60,
let bd = document.querySelector("body");
if (document.location.href == "index2.html") {
    bd.requestFullscreen();
}
let page = document.querySelectorAll(".lang");
for (let j = 0; j < 4; j++) {
    page[j].addEventListener("click", function() {
        document.location.href = "index2.html"
    })
};

Vahan60 12.03.2021 14:00
Все равно фулскрин не работает.
Я даже максимально упростил страницу. Указал конкретную кнопку без перебора.

<script>
let bd = document.querySelector("body");
          if (document.location.href == "test2.html") {
             bd.requestFullscreen();
             }   

let page = document.querySelectorAll(".page");
        page[3].addEventListener("click", function() {
        document.location.href = "test2.html"
    });


    </script>


Все равно не получается.

Vahan60 12.03.2021 14:45
Это максимально упрощенный код первой страницы:
Код:
<html>
  <head>
    <meta charset="UTF-8" />
    <title>TEST</title>
       
  </head>
  <body>

        <div class = "menu">
          <button class = "page"><h1>страница1</h1></button>
          <button class = "page"><h1>страница2</h1></button>
          <button class = "page"><h1>страница3</h1></button>
          <button class = "page"><h1>страница4</h1></button>
        </div>
   
        <script>
       
      let bd = document.querySelector("body");
          if (document.location.href == "test2.html") {
            bd.requestFullscreen();
            };

        let page = document.querySelectorAll(".page");
        page[3].addEventListener("click", function() {
        document.location.href = "test2.html"
    });       
       
    </script>

  </body>
</html>
А это код второй страницы:

Код:
<html>
  <head>
    <meta charset="UTF-8" />
    <title>TEST2</title>
       
  </head>
  <body>

        <div class = "menu">
          <button class = "page"><h1>страница1</h1></button>
          <button class = "page"><h1>страница2</h1></button>
          <button class = "page"><h1>страница3</h1></button> 
        </div>
   
  </body>
</html>
При клике на button "страница4" на странице "TEST" страница "TEST2" должна открыться в fullscreen режиме. Но открывается в стандартном режиме.
Почему?

рони 12.03.2021 15:21
Vahan60,
потому что вторая страница не знает ни о каких кликах на первой странице.

рони 12.03.2021 15:23
Vahan60,
это вниз на вторую страницу.
let bd = document.querySelector("body");
          
             bd.requestFullscreen();


это на первую
let page = document.querySelectorAll(".page");
        page[3].addEventListener("click", function() {
        document.location.href = "test2.html"
    });

Vahan60 13.03.2021 10:01
Нее. Не хочет

Код:
<html>
  <head>
    <meta charset="UTF-8" />
    <title>TEST</title>
       
  </head>
  <body>
        <div class = "menu">
                  <button class = "page"><h1>страница1</h1></button>
          <button class = "page"><h1>страница2</h1></button>
          <button class = "page"><h1>страница3</h1></button>
          <button class = "page"><h1>страница4</h1></button>
    </div>
   
        <script>
       
        let page = document.querySelectorAll(".page");
        page[3].addEventListener("click", function() {
        document.location.href = "test2.html"
    });


    </script>

  </body>
</html>
Код:
<html>
  <head>
    <meta charset="UTF-8" />
    <title>TEST2</title>
       
  </head>
  <body>
        <div class = "menu">
                  <button class = "page"><h1>страница1</h1></button>
          <button class = "page"><h1>страница2</h1></button>
          <button class = "page"><h1>страница3</h1></button>
         
    </div>
    <script>
       
        let bd = document.querySelector("body");
            bd.requestFullscreen();

    </script>
  </body>
</html>
Еще и консоль ругается :

"test2.html:17 Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
(anonymous) @ test2.html:17"

"test2.html:17 Uncaught (in promise) TypeError: fullscreen error
at test2.html:17"

рони 13.03.2021 10:09
Цитата:
Сообщение от Vahan60
Еще и консоль ругается :
переход в полноэкранный режим, возможен только по выбору пользователя.

Vahan60 13.03.2021 11:48
Ну что же.
Отрицательный результат - тоже результат.


Часовой пояс GMT +3, время: 11:13.