Javascript-форум - FullScreen не срабатывает

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - FullScreen не срабатывает (https://javascript.ru/forum/events/82102-fullscreen-ne-srabatyvaet.html)

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>

Код работает наполовину. Новая страница открывается, но не в полноэкранном режиме.
В чём дело, где я ошибаюсь?

Vahan60,
вторая строка скрипта.

if(document.location.href == "index2.html") bd.requestFullscreen();

Переписал.
Получилось следующее:

Код:

<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>

Открывает в полноэкранном режиме, но не переходит на вторую страницу.

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"
    })
};

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

<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>

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

Это максимально упрощенный код первой страницы:

Код:

<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 режиме. Но открывается в стандартном режиме.
Почему?

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

Vahan60,
это вниз на вторую страницу.

let bd = document.querySelector("body");
          
             bd.requestFullscreen();

это на первую

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

Нее. Не хочет

Код:

<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"

Цитата:

Сообщение от Vahan60

Еще и консоль ругается :

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